小程序自助开发工具_jQuery无缝轮播图代码

jQuery无缝轮播图代码       这篇文章主要为大家详细介绍了jQuery无缝轮播图代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery无缝轮播图的具体代码，供大家参考，具体内容如下

 html 代码

 div 
 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 
 div /div 
 div /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);

 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 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。