向左滑动
111会补到666后面,然后222等会往前
*{
padding: 0;margin: 0;
}
.content{
width: 612px;
height: 60px;
border: 1px solid #ccc;
margin: 0 auto;
overflow: hidden;
}
ul li{
list-style: none;
float: left;
width: 100px;
line-height: 60px;
text-align: center;
height: 60px;
border: 1px solid #eee;
}
<div class="content">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
<script>
setInterval(loop,1000);
function loop(){
$('.content ul').animate({'margin-left':'-102px'},
function(){
$('.content ul li').eq(0).appendTo($('.content ul'));
$('.content ul').css({'margin-left':'0'});
})
}
</script>
图片直接消失出现
<div class="main">
<div class="img">
<img src="./download_list_r10_c1.jpg" alt="">
<img src="./download_list_r1_c1.jpg" alt="">
<img src="./download_list_r4_c1.jpg" alt="">
<img src="./download_list_r6_c1.jpg" alt="">
<img src="./download_list_r8_c1.jpg" alt="">
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
lun(1);
len = $('.img img').length;
i = 1;
var t;
time = 1000;
t=setInterval(function(){
if(i>len){
i=1;
}
lun(i,time);
i++;
},time);
function lun(i,time){
left = -800*(i-1); //800为图片宽度
$('.img').animate({left:left},time);
$('.main ul li').css('color','#fff').css('background','skyblue');
$('.main ul li').eq(i-1).css('color','red').css('background','pink');
}
</script>
图片整体向左移动,展示完最后一个后,从头开始
<div class="main">
<div class="img">
<img src="./download_list_r10_c1.jpg" alt="">
<img src="./download_list_r1_c1.jpg" alt="">
<img src="./download_list_r4_c1.jpg" alt="">
<img src="./download_list_r6_c1.jpg" alt="">
<img src="./download_list_r8_c1.jpg" alt="">
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
lun(1);
len = $('.img img').length;
i = 1;
var t;
time = 1000;
t=setInterval(function(){
if(i>len){
i=1;
}
lun(i,time);
i++;
},time);
function lun(i,time){
left = -800*(i-1); //800为图片宽度
$('.img').animate({left:left},time);
$('.main ul li').css('color','#fff').css('background','skyblue');
$('.main ul li').eq(i-1).css('color','red').css('background','pink');
}
</script>