JavaScript定時器--圖片輪播
阿新 • • 發佈：2019-02-19
js：
move() 利用定時器實現移動
//要讓哪一個元素運動
//元素運動方向
//從哪裡運動到哪裡
//時間
//呼叫：
//move(document.getElementById("demo"), 'left', '300px', '100px', 2000);
function move(ele, dir, fromVal, toVal, dur, callBack){
var moveCount = dur / 10;
var oldPos;
var speed;
var offset;
// console.log(toVal.split('px')[0]);
switch html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#imagebox{
width: 400px;
height: 200px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#images{
width: 100%;
height: 100%;
position: relative;
list-style: none;
}
#images li{
width: 100%;
height: 100%;
position: absolute;
left: -100%;
}
#images li:first-child{
left: 0;
}
#images li img{
height: 100%;
width: 100%;
}
#points{
position: absolute;
height: 20px;
bottom: 10px;
list-style: none;
}
#points li{
width: 10px;
height: 10px;
border-radius: 5px;
margin: 5px;
background: white;
float: left;
}
#points li:first-child{
background: cadetblue;
}
#direction li{
width: 10px;
height: 10px;
border-radius: 5px;
margin: 5px;
background: red;
}
</style>
<body>
<div id="imagebox">
<ul id="images">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
<ul id="direction">
<li id="leftDir"></li>
<li id="rightDir"></li>
</ul>
<ul id="points">
</ul>
</div>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lis = document.getElementById("images").getElementsByTagName("li");
var pointBox = document.getElementById("points");
var points = [];
pointBox.style.width = 20*lis.length + 'px';
pointBox.style.left = (400-20*lis.length) * 0.5 + "px"
for(var i = 0; i < lis.length; i++){
var li = document.createElement("li");
points.push(li);
pointBox.appendChild(li);
li.index = i;
//點選立刻翻頁
li.onclick = function(){
// console.log(this.index);
if(this.index > nowIndex ){
clearInterval(timer);
nextImage(this.index);
conTinuePlay();
}
if(this.index < nowIndex ){
clearInterval(timer);
jumpBack(this.index);
conTinuePlay();
}
}
}
//自動滾動
var nowIndex = 0;
var count = lis.length;
var timer = setInterval(function(){
var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;
nextImage(nextIndex);
}, 2000);
function setContinuePlay(){
timer = setInterval(function(){
var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;
nextImage(nextIndex);
}, 2000);
}
function conTinuePlay(){
setTimeout(setContinuePlay(), 5000);
}
function nextImage(nextIndex){
//當前圖片向左400px
move(lis[nowIndex],'left', '0px', '-400px', 300);
//下一張圖片向左400px
move(lis[nextIndex],'left', '400px', '0px', 300);
//小點點：顏色切換
points[nowIndex].style.background = 'white';
points[nextIndex].style.background = 'cadetblue';
//自增
nowIndex = nextIndex;
}
function jumpBack(jumpToIndex){
//當前圖片向左400px
move(lis[nowIndex],"left", '0px', '400px', 300);
//下一張圖片向左400px
move(lis[jumpToIndex],'left', '-400px', '0px', 300);
//小點點：顏色切換
points[nowIndex].style.background = 'white';
points[jumpToIndex].style.background = 'cadetblue';
//自增
nowIndex = jumpToIndex;
}
</script>
</body>
</html>