Swipe left
111 will be added to the back of 666, and then 222 will go forward
*{
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>
The picture disappears immediately
<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 is the image width
$('.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>
The picture is moved to the left as a whole, and after the last one is displayed, it starts from the beginning
<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 is the image width
$('.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>