jQuery无缝轮播图代码
本文实例为大家分享了jQuery无缝轮播图的具体代码，供大家参考，具体内容如下
html代码
<divclass="banner"> <ulclass="img"> <li><ahref="#"><imgsrc="image/1.jpg"></a></li> <li><ahref="#"><imgsrc="image/2.jpg"></a></li> <li><ahref="#"><imgsrc="image/3.jpg"></a></li> <li><ahref="#"><imgsrc="image/4.jpg"></a></li> </ul> <ulclass="num"> </ul> <divclass="btnbtn_l"><</div> <divclass="btnbtn_r">></div> </div>
jq代码
$(function(){
vari=0;
varclone=$(".banner.imgli").first().clone();
$(".banner.img").append(clone);
varsize=$(".banner.imgli").size();
for(varj=0;j<size-1;j++){
$(".banner.num").append("<li></li>");
}
$(".banner.numli").first().addClass('on');
//鼠标划入圆点
$(".banner.numli").hover(function(){
varindex=$(this).index();
i=index;
$(".banner.img").stop().animate({left:-index*1000},500);
$(this).addClass('on').siblings().removeClass('on');
})
/*自动轮播*/
vart=setInterval(function(){
i++;
move();
},2000);
//对banner定时器的操作
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
/*向左按钮*/
$(".banner.btn_l").click(function(){
i++;
move();
})
/*向右按钮*/
$(".banner.btn_r").click(function(){
i--;
move();
})
functionmove(){
if(i==size){
$(".banner.img").css({left:0});
i=1;
}
if(i==-1){
$(".banner.img").css({left:-(size-1)*1000});
i=size-2;
}
$(".banner.img").stop().animate({left:-i*1000},500);
if(i==size-1){
$(".banner.numli").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".banner.numli").eq(i).addClass('on').siblings().removeClass('on');
}
}
})
style样式
<style>
*{padding:0;margin:0;list-style:none;}
.banner{
margin:100pxauto;
border:5pxsolid#000;
width:1000px;
height:640px;
position:relative;
overflow:hidden;
}
.banner.img{
width:5000px;
position:absolute;
left:0px;
top:0px;
}
.banner.imgli{
float:left;
}
.banner.num{
position:absolute;
width:100%;
bottom:20px;
left:0px;
text-align:center;
font-size:0px;
}
.banner.numli{
width:10px;
height:10px;
background:#888;
border-radius:50%;
display:inline-block;
margin:03px;
cursor:pointer;
}
.banner.numli.on{
background:#f00;
}
.banner.btn{
width:30px;
height:50px;
background:rgba(0,0,0,0.5);
position:absolute;
top:50%;
margin-top:-25px;
cursor:pointer;
text-align:center;
line-height:50px;
color:#fff;
font-size:40px;
font-family:"宋体";
display:none;
}
.banner:hover.btn{
display:block;
}
.banner.btn_l{
left:0px;
}
.banner.btn_r{
right:0px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。