<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Слайд шоу на библиотеке jQuery</title>
<style type="text/css">
body {
margin:0;
padding; 0;
}
#Wrap {
border:red solid 1px;
width: 100%;
overflow-x:hidden;
height:auto;
margin:0;
padding; 0;
text-align:left;
position:relative;
}
#slideWrp {
height:356px!important;
overflow-x:hidden;
display:inline-block;
white-space:nowrap!important;
padding:0;
margin:0;
border:red solid 1px;
}
.slide {
float:left;
height:356px!important;
width:577px;
margin:0 -1px 0 -1px;
padding:0;
border:transparent solid 1px;
}
.slide img{
margin-left:-47px;
}
#Wrap {
max-width: 1470px;/* max-width = 490px*3 (Три ширины слайд картинок);*/
}
#indexActive{
float:right;
margin-right:30px;
margin-top:10px;
}
span[id^="active_Ind"]{
cursor:pointer;
float:right;
border:blue solid 2px;
height:6px;
width:6px;
margin:6px;
}
span[id^="active_Ind"].active{
border: red solid 2px;
float:right;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideWIDTH = 490;
var SLlength = $(".slide").length;
$('#slideWrp').width(490*SLlength)
var ReSlide = (SLlength - (1-SLlength%2)); //Тест на четность
function MarginSet(){
var margLeft = parseInt(($("#Wrap").width()-ReSlide*(1+$(".slide:first").width()))/2)+'px';
$("#slideWrp").css({'margin-left':margLeft})
}
MarginSet();
$(window).resize(function(){
MarginSet();
});
//===========================//
var a=$('#slideWrp');
var b=a.width;
a.css({'width':b})
$(".slide").each(function(i){
$(this).attr('id','Slide-'+i);
$("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
});$("#indexActive #active_Ind_0").addClass('active');
var starT=true;
function ReplacSL(N){//alert(N)
var slide=$(".slide:first");
var W = parseInt(slide.width());
var time = parseInt(410/Math.sqrt((N+1)))
var marginLft = slide.css('margin-left');
slide.animate({'margin-left':'-'+W+'px'},time,"linear",
function(){
slide.appendTo('#slideWrp');slide.css({'margin-left':marginLft});
N--;if(N){ReplacSL(N);} else {starT=true;}
});
}
function slideReplac(a,b){
if(!starT) return;
starT=false;
if(a!=b){var N=b-a;
if(+a>+b)N=b+SLlength-a;
ReplacSL(N);
}
}
var s = SLlength - parseInt(ReSlide/2)
for(var i=0; i<s; i++){
$(".slide:first").appendTo('#slideWrp')
}
$("#indexActive > span[id^='active_Ind']").click(function(){
UserNoActSlide=false;
var startI = +$("#indexActive > span.active").attr('id').replace('active_Ind_','');
$("#indexActive > span.active").removeClass('active');
$(this).addClass('active');
var nextI = +$(this).attr('id').replace('active_Ind_','');
slideReplac(startI,nextI)
});
// АВТОПРОКРУТКА
var intervalAutoId;
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){
clearInterval(intervalAutoId);
intervalAutoId=setInterval(function(){
UserNoActSlide=false;
var id= $("span[id^='active_Ind_'].active").attr('id');
id = (+(id.replace('active_Ind_',''))+SLlength- 1)% SLlength;
$('#active_Ind_'+ id).click();
},4000); // Интервал автопрокрутки
}
},10000); // Интервал Теста;
});
</script>
</head>
<body style="margin:0;padding:0;height:100%;width:100%;top:0;background: #FFFFFF url(http://hostjs-mybb2011.narod.ru/img/bg000000.gif) repeat-x 50%;">
<div style="padding:40px 40px;width:90%;margin:0 auto;background-color:#fff;">
<div id="Wrap">
<div id="slideWrp">
<div class="slide"><img src="http://s3.uploads.ru/UnR4O.png"/></div>
<div class="slide"><img src="http://s3.uploads.ru/xd2BS.png"/></div>
<div class="slide"><img src="http://s3.uploads.ru/oPsTG.png"/></div>
<div class="slide"><img src="http://s3.uploads.ru/aGCih.png"/></div>
<div class="slide"><img src="http://s2.uploads.ru/zrZwu.png"/></div>
<div class="slide"><img src="http://s3.uploads.ru/ej8UB.png"/></div> <!---->
</div>
<div id="indexActive"></div>
</div>
</div>
</body>
</html>
<!-- //Конец страницы //-->