Сообщение от IgorArhangel
|
Было супер если бы пример сюда поставить
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#Wrap {
width:480px;
position:relative;
text:align:center;
}
#SlideWrp{
display:inline-block;
}
#Prev,#Next {
border:red solid 1px;
padding:2px;
cursor:pointer;
}
#Prev {
float:left;
}
#Next {
float:right;
}
div.Slide {
//float:left;
float:right;
height:100px!important;
width:200px;
padding:6px;
border:blue solid 1px;
}
#SlideWrp {
height:114px; //height+border+padding;
overflow-y:hidden; //не расширение до $(".Slide:not('.active')").hide();
width:430px;
}
#indexActive{
float:right;
margin-right:50px;
margin-top:10px;
}
span[id^="active_Ind"]{
float:right;
border:blue solid 2px;
height:3px;
width:3px;
margin:3px;
}
span[id^="active_Ind"].active{
border: red solid 2px;
}
</style>
<div id="Wrap">
<span id="Prev">←</span><span id="Next">→</span>
<div id="SlideWrp">
<div class="Slide active">1</div>
<div class="Slide active">2</div>
<div class="Slide">3</div>
<div class="Slide">4</div>
<div class="Slide">5</div>
</div><br />
<div id="indexActive"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".Slide:not('.active')").hide();
var intervalAutoId;
var LsL=$(".Slide").length;
$(".Slide").each(function(i){
$(this).attr('data',i);
$("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
});$("#indexActive #active_Ind_0").addClass('active');
function setIndActive(){
var j=$(".Slide.active:first").attr('data');
$("#indexActive span[id^='active_Ind_']").removeClass('active');
$("#indexActive span[id='active_Ind_"+j+"']").addClass('active');
}
$("#Next").click(function(){
UserNoActSlide=false;
$(".Slide:first").removeClass('active').hide('slow',function () {$(this).appendTo("#SlideWrp")});
$(".Slide:eq(2)").addClass('active').show('slow');
setIndActive();
});
$("#Prev").click(function(){
UserNoActSlide=false;
$(".Slide.active:last").removeClass('active').hide('slow');
$(".Slide:last").prependTo("#SlideWrp").addClass('active').show('slow');
setIndActive()
});
// АВТОПРОКРУТКА
var UserNoActSlide=true;
$("#Wrap").bind('mouseenter mousemove',function(){ //Cброс автозапуска по наведению
UserNoActSlide=false;//alert("A")
clearInterval(intervalAutoId);
UserNoActSlide=false;
}).mouseleave(function(){ //Разрешаем автозапуск по сходу курсора
clearInterval(intervalAutoId);
UserNoActSlide=true;
});
setInterval(function(){ //Периодический тест активности и автозапуск
if(UserNoActSlide){
intervalAutoId=setInterval(function(){
UserNoActSlide=false;
$("#Next").click();
},3000); // Интервал автопрокрутки
}
},10000); // Интервал Теста;
});
</script>