jQuery轮播图代码,jQuery无缝轮播图,jQuery轮播图片本文实例为大家分享了jQuery无缝轮播图的具体代码，供大家参考，具体内容如下 html 代码
<div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#"><img src="image/2.jpg"></a></li> <li><a href="#"><img src="image/3.jpg"></a></li> <li><a href="#"><img src="image/4.jpg"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div></div> jq代码
$(function(){ var i=0; var clone=$(".banner .img li").first().clone(); $(".banner .img").append(clone); var size = $(".banner .img li").size(); for(var j=0;j<size-1;j++){ $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function(){ var index=$(this).index(); i=index; $(".banner .img").stop().animate({left:-index*1000},500); $(this).addClass('on').siblings().removeClass('on'); }) /*自动轮播*/ var t=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(); }) function move(){ 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 .num li").eq(0).addClass('on').siblings().removeClass('on'); }else{ $(".banner .num li").eq(i).addClass('on').siblings().removeClass('on'); } }})style 样式
<style>*{padding:0;margin:0;list-style: none;}.banner{ margin:100px auto; border:5px solid #000; width:1000px; height:640px; position: relative; overflow: hidden;}.banner .img{ width:5000px; position: absolute; left:0px; top:0px;}.banner .img li{ float:left;}.banner .num{ position:absolute; width:100%; bottom:20px; left:0px; text-align: center; font-size: 0px;}.banner .num li{ width:10px; height:10px; background: #888; border-radius: 50%; display: inline-block; margin:0 3px; cursor: pointer;}.banner .num li.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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
jQuery轮播图代码,jQuery无缝轮播图,jQuery轮播图片
|
