jquery轮播，横向，无缝连接
，直接源码，为大家准备，唯一的不完美就是鼠标放上去是直接到那一张去，判断的时候，动画未完成，所以判断不正确，而我的鼠标又移走了，所以会出现空白，为了修复这个bug，我只能让鼠标移动上去，就直接跑到需要的那张图去，而不出bug，如果更好方案，请自行更改，
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>来哇。横向无缝隙滚动</title>
<link rel="icon" href="http://www.jq22.com/favicon.ico" />
<style type="text/css">
/*
**author:李国亮 Li Guo Liang
**QQ：769520405
**date:2016年4月1日12:05:24
**e-mail:guoliang52013@qq.com
**/
*{margin:0; padding:0;}
ol li{list-style: none;}
ul li{list-style: none;}
img{ display:block}
.box{width:1150px; height: 450px; position: relative; overflow: hidden;}
.box ul{width: 0px; position: absolute; left: 0px; top: 0px;}
.box ul li{ width: 1150px; height: 450px; float: left;}
.clear{ *zoom:1;}
.clear:before,.clear:after{ line-height:0; content:""; display:table;}
.clear:after{ clear:both}
.anniu{ width:40px; height:80px; background:red; position:absolute; text-align:center}
.anniu a{ display:block; font:bold 14px/20px "微软雅黑"; width:14px; height:auto; padding:10px 13px; text-decoration:none; color:#FFF}
.left{ left:0; top:50%;margin-top:-40px;}
.right{ right:0; top:50%;margin-top:-40px;}
.box div.clear{ width:420px; height:40px; position:absolute; left:50%; margin-left:-210px; bottom:20px;}
.box div.clear div{ width:40px; height:40px; border-radius:20px; background-color:#666; margin:0 10px; float:left; cursor:pointer}
.box div.clear div.c{ background-color:#FFF;}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="clear">
<li><img src="images/banner_img1.jpg" /></li>
<li><img src="images/banner_img2.jpg" /></li>
<li><img src="images/banner_img3.jpg" /></li>
<li><img src="images/banner_img4.jpg" /></li>
<li><img src="images/banner_img5.jpg" /></li>
<li><img src="images/banner_img6.jpg" /></li>
<li><img src="images/banner_img7.jpg" /></li>
</ul>
<!--为了不想因为不冲突而写更多的名字，所以我就用div了，贱笑了-->
<div class="clear divF">
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
<div class="cur"></div>
</div>
<div class="anniu left"><a href="javascript:void(0)">按我呀</a></div>
<div class="anniu right"><a href="javascript:void(0)">按我呀</a></div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function bigin(name,name1,name2_left,name2_right,name3,name3_child,classname){
var cur = $(name3);
var curF = $(name3_child);
cur.eq(0).addClass(classname);//给第一个小圆圈增加一个默认样式
var liW = $(name).width();
var lengthli = $(name).length;
var len = lengthli*2;//复制一份相当于两份图片
$(name1).append($(name1).html()).css({'width':len*liW, 'left': -len*liW/2});
var timer=setInterval(play,2000);
var index =0;
//获取ul的总宽度的一半，这里的一半其实跟你样式表里面设置的宽度是一样一样的，不设置就是全部li加在一起的宽度
var w = $(name1).width()/2;
var k=0;
var ulW = $(name1).width();//获取ul的总宽度，是默认的两倍，为什么呢，看前方代码，说了复制了一份li，加入了ul里面
var W = parseFloat(ulW)-parseFloat(liW);
function play(){
$(name2_right).trigger('click'); //当页面一加载就触发next按钮的点击事件，用trigger的好处是减少重复代码,如果不用，就要把按钮click事件里代码全部复制过来，因为加载的代码和点击next按钮代码和效果相同，所以就用trigger触发执行click里面代码。
}
cur.mouseover(function(){//小圆圈触发的事件
clearInterval(timer);
index=$(this).index();
k = w+liW*index;
cur.eq(index).addClass(classname).siblings().removeClass(classname);
$(name1).stop().css({"left":-k+"px"}); //此处判断如果是动画的话，会出现以下判断 不正确
});
cur.mouseout(function(){
if(k == W){//如果上方是动画切换会导致这里判断不相等，导致出现参数错误，而出现空白图片，有更好判断的小伙伴们，给个建议
k=-w+liW;
$(name1).css("left",k+"px");
}
timer=setInterval(play,2000);
});
$(name).hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(play,2000);
});
$(name2_left).hover(function(){//本来不想要这个hover的，但是又怕点击发生错乱，还是加个吧，唉，也是够拼了
clearInterval(timer);
},function(){
timer=setInterval(play,2000);
});
$(name2_right).hover(function(){//本来不想要这个hover的，但是又怕点击发生错乱，还是加个吧，唉，也是够拼了
clearInterval(timer);
},function(){
timer=setInterval(play,2000);
});
$(name2_left).click(function(){
if(!$(name1).is(':animated')){//这个加在showCurrent()函数前面
index--;
if(index<0)index=cur.length-1;
cur.eq(index).addClass(classname).siblings().removeClass(classname);
}
l=parseInt($(name1).css("left"))+liW; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
$(name2_right).click(function(){
if(!$(name1).is(':animated')){//这个加在showCurrent()函数前面
index++;
if(index>cur.length-1)index=0;
cur.eq(index).addClass(classname).siblings().removeClass(classname);
}
l=parseInt($(name1).css("left"))-liW; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
function showCurrent(l){ //把图片的左右切换封装成一个函数
if($(name1).is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。
return;
}
$(name1).animate({"left":l},1000,function(){
if(l==0){ //当图片位置到第一份图片第二张时，马上把图片定位到第二份的第一张。注意这里的设置的css一定到写在animate动画完成时的执行 //函数里。否则图片只是一瞬间回到第一张，但是没有向右的动画效果。 我在做的时候，用的不是css,而是用animate()定位到第二个第一张，结果切换时，是反方向的运动，一直觉得无论怎样，图片方向都会发生变化 ，弄得花了一天时间才找到原因，所以一定 要用css。
$(name1).css("left",-len*liW/2);
}else if(l==(1-len)*liW){ //图片位置到最后一张时（第二份最后一张）时，就把图片定位到第一份最后一张。从而显示的是第一份最后一张。
$(name1).css('left',(1-len/2)*liW);
}
});
}
}
bigin("ul li","ul",".left",".right",".cur",".curF","c");
//四个参数，第一个，存放图片的一群li，第二个，是ul，也就是这群li的老子，第三个是左边的按钮，第四个是右边的按钮,第五个是小圆圈，第六个是小圆圈的老子，第七个是那个白颜色的背景
//ul必须绝对定位，li必须左浮动，ul的爹必须overflow和相对定位；
</script>
</body>
</html>
浙公网安备 33010602011771号