輪播圖最后一張圖到第一張圖的切換問題。

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 張圖片參與輪播。

第三張結束后，繼續(xù)滑動，其實是顯示第四張，但是第四張和第一張是一樣的，所以看起來是從第三張滑動到第一張。

但是第四張后面沒有了，如果要繼續(xù)顯示第二張，就必須在“第四張“結束滑動后立刻將容器的位置重置，類似下面這樣。

然后再繼續(xù)滑動，就是顯示第二張，這樣就實現了無限。

2017年12月5日 20:04

編輯回答

安于心

因為你的這個是ul距離的移動,一個輪回下來,ul肯定會重新開始,所以最后一張到第一張切換就有問題了 ;
我改了一下,用li的偏移,應該是滿足你的需求了你看看

圖片描述

css代碼也來一波
<style>

    body{

height: 5000px
}
div{

width: 400px;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.pic li{
transition: all 1s;
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(1.png)no-repeat;
background-size: 400px 400px;
}
.two{

background: url(2.png)no-repeat;
background-size: 400px 400px;
}
.three{

background: url(3.png)no-repeat;
background-size: 400px 400px;
}
.four{

background: url(4.png)no-repeat;
background-size: 400px 400px;
}
.five{

background: url(1.png)no-repeat;
background-size: 400px 400px;
}