<title>无缝轮播图</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.banner{width:600px;height:300px;border:2pxsolid#ccc;margin:100pxauto;position:relative;overflow:hidden;}
.img{position:absolute;top:0;left:0}
.imgli{float:left;}
.num{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}
.numli{width:10px;height:10px;background:rgba(0,0,0,0.5);display:block;border-radius:100%;display:inline-block;margin:05px;cursor:pointer;}
.btn{display:none;}
.btnspan{display:block;width:50px;height:100px;background:rgba(0,0,0,0.6);color:#fff;font-size:40px;line-height:100px;text-align:center;cursor:pointer;}
.btn.prev{position:absolute;left:0;top:50%;margin-top:-50px;}
.btn.next{position:absolute;right:0;top:50%;margin-top:-50px;}
.num.active{background-color:#fff;}
</style>
<scriptsrc="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<divclass="banner">
<ulclass="img">
<li><ahref="#"><imgsrc="img/1.jpg"alt="第1张图片"></a></li>
<li><ahref="#"><imgsrc="img/2.jpg"alt="第2张图片"></a></li>
<li><ahref="#"><imgsrc="img/3.jpg"alt="第3张图片"></a></li>
<li><ahref="#"><imgsrc="img/4.jpg"alt="第4张图片"></a></li>
<li><ahref="#"><imgsrc="img/5.jpg"alt="第5张图片"></a></li>
</ul>
<ulclass="num"></ul>//
<divclass="btn">
<spanclass="prev"><</span>
<spanclass="next">></span>
</div>
</div>
<script>
$(function(){
vari=0;
vartimer=null;
for(varj=0;j<$('.imgli').length;j++){//创建圆点
$('.num').append('<li></li>')
}
$('.numli').first().addClass('active');//给第一个圆点添加样式
varfirstimg=$('.imgli').first().clone();//复制第一张图片
$('.img').append(firstimg).width($('.imgli').length*($('.imgimg').width()));//将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
//下一个按钮
$('.next').click(function(){
i++;
if(i==$('.imgli').length){
i=1;//这里不是i=0
$('.img').css({left:0});//保证无缝轮播，设置left值
};
$('.img').stop().animate({left:-i*600},300);
if(i==$('.imgli').length-1){//设置小圆点指示
$('.numli').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.numli').eq(i).addClass('active').siblings().removeClass('active');
}
})
//上一个按钮
$('.prev').click(function(){
i--;
if(i==-1){
i=$('.imgli').length-2;
$('.img').css({left:-($('.imgli').length-1)*600});
}
$('.img').stop().animate({left:-i*600},300);
$('.numli').eq(i).addClass('active').siblings().removeClass('active');
})
//设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
})
//鼠标划入圆点
$('.numli').mouseover(function(){
var_index=$(this).index();
$('.img').stop().animate({left:-_index*600},150);
$('.numli').eq(_index).addClass('active').siblings().removeClass('active');
})
//定时器自动播放
timer=setInterval(function(){
i++;
if(i==$('.imgli').length){
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if(i==$('.imgli').length-1){
$('.numli').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.numli').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
//鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if(i==$('.imgli').length){
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if(i==$('.imgli').length-1){
$('.numli').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.numli').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
})
})
</script>
|
Copyright©2000-2022