使用jQuery實作的圖檔左右來回輪播功能
第一次使用CSDN寫部落格，諸多不完善之處還望各位多多諒解。希望今後的日子和大家有更多的交流和發展。話不多說，進入主題。
輪播功能有很多，我沒事寫了一個左右來回輪播的功能，滑鼠進入可以暫停，移出續播，就是這樣一個簡單的功能。直接上代碼：
CSS部分：
<style type="text/css">
*{ padding: 0;margin: 0; }
.out{
width: 1200px;
height: 200px;
background-color: cyan;
margin: 20px auto;
border: 2px solid green;
overflow: hidden;
position: relative;
}
.in{
width: 4800px;
height: 200px;
position: absolute;
display: flex;
left: 0; top: 0;
}
/* 其實用CSS做也行，不過難以實作左右輪回播放 */
@keyframes plays{
30%{ left: -1200px; }
60%{ left: -2400px; }
100%{ left: -3600px; }
}
</style>
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="out">
<div class="in">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
</div>
</body>
</html>
jQuery部分：
<script>
$(function(){
// 代碼添加圖檔
var imgs = document.getElementsByTagName('IMG')
for(var i=0;i<imgs.length;i++){
imgs[i].src = (i+1)+'.jpg';
imgs[i].width = 200;
imgs[i].height = 200;
}
// 定義需求變量
var mytimer; // 定時器,在需要的地方關閉和開啟
var newtime1, newtime2; // 注意：要用Math的abs取絕對值，負值無法作為時間數值
var direct = 'left' // 方向控制
var lefts; // 移動距離控制
lefts = parseFloat($('.in').css('left'))
newtime1 = Math.abs(parseInt((-3600-lefts)*(10000/3600))) // 向左移動剩餘時間
newtime2 = Math.abs(parseInt((lefts)*(10000/3600))) // 向右移動剩餘時間
// 頁面載入就進行輪播
mytimer = setInterval(newplay, 100)
// 滑鼠進入移出時的暫停/續播控制
$('.in').mouseenter(function(e){
// 滑鼠進入時關閉計時器
clearInterval(mytimer)
// 暫停目前動畫，注意：不要直接完成，僅僅停留在目前位置，後面擷取目前位置要用
$('.in').stop(true)
}).mouseleave(function(){
// 滑鼠移出，擷取目前位置
lefts = parseFloat($('.in').css('left'))
// 改變向左和向右的時間，因為在這裡是不知道向左還是向右移動的
newtime1 = Math.abs(parseInt((-3600-lefts)*(10000/3600)))
newtime2 = Math.abs(parseInt((lefts)*(10000/3600)))
// 重新開始計時器
mytimer = setInterval(newplay, 100)
})
// 移動處理函數
function newplay(){
// 向左
if(direct=='left'){
$('.in').animate({left: '-3600px'}, newtime1, 'linear', function(){
// 記得在目前動畫完成後，改變方向
direct = 'right';
}).animate({ left: '0px'}, 10000, 'linear', function(){
direct = 'left';
})
// 1.由于計時器的循環套用，時間newttime1不會改變，需要關閉目前計時器
clearInterval(mytimer)
// 2.然後改變時間的值，使時間更新
newtime1 = 10000
// 3.再次開啟計時器
mytimer = setInterval(newplay, 100)
}else if(direct=='right'){ // 向右
$('.in').animate({left: '0px'}, newtime2, 'linear', function(){
direct = 'left'
}).animate({ left: -3600+'px'}, 10000, 'linear', function(){
direct = 'right'
})
// 原理同向左
clearInterval(mytimer)
newtime2 = 10000
mytimer = setInterval(newplay, 100)
}
}
})
</script>
第一次發表，就這麼多。哪位大神如果有更好的方案，歡迎交流學習！最後，感謝大家的觀看
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)