<body>
<div class="ccyc0 tinzhi" style="width:100%">
<div class="ccyc both">
<ul class="ccycul">
<li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li></ul>
<ul class="ccycul">
<li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li></ul>
<ul class="ccycul">
<li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li><li>
</li></ul>
</div>
</div>
</div>
<style>
.both{
clear：both;
}
.ccyc0{
width: 100%;
background: rgba(0,0,0,0.5);
overflow: hidden;/隐藏了多余ul/
}
.ccyc{
position: relative;
width: 500%;
}
.ccycul{
width: 20%;
float: left;
}
.ccycul li{
width: 16.66%;
float: left;
margin: 0!important;
padding: 1%;
}
.ccycul li img{
width: 100%;
}
</style>
<script>
//无缝js轮播开始
$('.ccyc').prepend($('.ccycul').eq(2).clone());//last最后；（这里是获取所有3个ul，从1开始计算所以开头插入的是3）
$('.ccyc').append($('.ccycul').eq(1).clone());//first最前；（这里是获取所有4个ul，从1开始计算所以结尾插入的是2，因为3个的时候开头插入了ul所以1已经排在了2）
var wit = $('.ccycul').width();//获取ul宽度
console.log(wit);
var jige = $('.ccyc').children().size();//获取ul个数5；上面最前面和最后面添加了一个，所以此时合为5个
console.log(jige);
$('.ccyc').css({left:-wit});//总共五个ul;此时移动了一个负ul宽，所以ul2个是当前视图;（ul1是最左边视图）
var curidx =0;//声明初始的坐标，curidx0对应视图ul2；
var mov = 1;//定义全局初始值后面要用
function left(){
$('.ccyc').animate({left:'-='+wit},800,function(){//点击后left等于当前left减一个ul宽度
//当点击后，会执行这个动画，把视口向左移动一个UL宽度的距离，就刚好像滚动一样
curidx+=mov;//curidx等于curidx加1
if(curidx===jige-2){//当坐标curidx等于3（curidx0相当于ul2此时就判断等于ul5时）的时候就表示移动到了最后
$('.ccyc').css({left:0-wit});//ccyc就left移动负一个ul宽，此时视图就是ul2就是初始位子（wit*0的时候没移动是ul1）
curidx=0;//此时curidx就归0
}
//如果已经移动到了最后一张图片，也就是末尾clone的1图片，就马上将视口设置为刚开始那样，因为同一张图片的变换人是看不出来的，然后再把坐标给设置回0.
})
}
function right(){
$('.ccyc').animate({left:'+='+wit},800,function(){//点击后left等于当前left加一个ul宽度
curidx-=mov;//curidx等于curidx减1
if(curidx===jige-6){//当坐标等于-1（curidx-1相当于ul1此时就判断等于ul1时【curidx0相当于ul2】）的时候就表示移动到了第一个
$('.ccyc').css({left:0-wit*3});//ccyc框就整体瞬间移动负的ul宽*3，此时视图就是ul4（wit*0的时候没移动是ul1）
curidx=2;//当前视图是ul4，所以对应curidx就应该是2（上面说了curidx0是ul2）
}
})
}
var tim = setInterval(left,2500);//定义循环时间
$('.tinzhi').mouseover(function(){//移入停止时间
clearInterval(tim);
})
$('.tinzhi').mouseout(function(){//移出定义循环时间
tim = setInterval(left,2500);
})
//无缝js轮播完
</script>
</body>
网友评论