极客观点
项目管理
HarmonyOS
1HTML<body>
<div>
<ul class="pic">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
</ul>
</div>
<button id="btn">btn</button></body>
2CSS*{
padding: 0;
margin: 0;
list-style: none;}
body{
height: 5000px}
div{
width: 400px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;}
.pic li{
display: inline-block;
float: left;
height: 100%;
width: 400px;}
.pic{
transition: all 1s;
font-size: 0;
height: 400px;
width: 2000px;
position: absolute;
left: 0}
.one{
background: url(../csstexting/1.jpg)no-repeat;
background-size: 400px 400px;}
.two{
background: url(../csstexting/2.jpg)no-repeat;
background-size: 400px 400px;}
.three{
background: url(../csstexting/3.jpg)no-repeat;
background-size: 400px 400px;}
.four{
background: url(../csstexting/4.jpg)no-repeat;
background-size: 400px 400px;}
.five{
background: url(../csstexting/1.jpg)no-repeat;
background-size: 400px 400px;}
3JQUERY$(document).ready(function(){
var cindex = 0;
$('#btn').click(function(){
cindex++;
if(cindex>4){
cindex = 1;
$('.pic').css("left","0px");
}
$('.pic').css("left",cindex*400*-1 + "px")
})})
想问一下我这么写最后一张图（也就是和第一张图一样）切换到正数第二章图的时候。图片会从右到左的方式切换到第二张图。请问怎么让图片有看上去像从第一张图切换到第二张图的那种效果啊
其实要复制第一张到最后面，所以如果你的图片是 3 张，实际上有 4 张图片参与轮播。
第三张结束后，继续滑动，其实是显示第四张，但是第四张和第一张是一样的，所以看起来是从第三张滑动到第一张。
但是第四张后面没有了，如果要继续显示第二张，就必须在“第四张“结束滑动后立刻将容器的位置重置，类似下面这样。
然后再继续滑动，就是显示第二张，这样就实现了无限。