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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。