在上一篇《網頁中的照片輪播》中的示例並不能很好的應用於每一個場景，所以，本文介紹滑動輪播代碼的編寫方法。
對於滑動輪播，基本的原理是這樣的：
注：
1、本文代碼不採用jQuery框架
2、文中示例（代碼）僅供參考
步驟：
1、編寫HTML標籤
2、編寫CSS樣式
3、利用JavaScript設置圖片
4、利用JavaScript設置定時切換
1、編寫HTML標籤
首先，編寫一個作爲可視區域的 div 盒子，併爲其定義類名爲 viewArea 。其中，包含一個圖片列表 ul 標籤，併爲其定義類名爲 imgList ，ID爲 List 。
注：在 ul 中並不需要添加 li 標籤，但是在步驟二需定義 li 的類，添加 li 標籤的工作交給JavaScript。
<div class="viewArea"> <!--可視區域-->
<ul id="List" class="imgList"></ul> <!--圖片列表-->
</div>
2、編寫CSS樣式
爲每個屬性設置寬度與高度。
設置 viewArea 的 overflow 屬性爲 hidden ，隱藏除可視區域外的圖片。
設置 viewArea 與 imgList 爲 relative（相對定位） 使圖片列表可以移動，併爲 imgList 設置 transition 屬性，使其移動具有動畫。
設置 img 的 background-repeat 與 background-size 屬性，適應圖片大小；設置 display 使其同行顯示。
注：
1、本例中圖片列表的上、左位置均爲零，即，初始顯示第一張圖片的位置。
2、並不爲 imgList 設置寬度，因圖片數量不同，其寬度也不同，寬度交給JavaScript設置。
*{
margin: 0;
padding: 0;
}
.viewArea{
position: relative;
width: 720px;
height: 405px;
overflow: hidden;
}
.imgList{
position: relative;
top: 0;
left: 0;
height: 405px;
transition: left 0.5s;
}
.img{
display: inline-block;
width: 720px;
height: 405px;
background-repeat: no-repeat;
background-size: 720px 405px;
}
3、利用JavaScript設置圖片
在JavaScript設置圖片中，需要定義四個全局變量：
1、存儲圖片地址的數組（本文使用示例圖片）
2、存儲圖片寬度
3、存儲圖片個數
4、存儲圖片列表寬度
然後，爲圖片列表設置寬度：
使用 document.getElementById() 方法返回的元素對象設置其 width 屬性。
最後，利用循環迭代爲圖片列表中添加子元素 li 標籤：
1、使用 document.createElement() 方法創建標籤
2、爲其添加類屬性
3、設置其背景圖片地址（地址需要使用 url() ）
4、添加子標籤
var img = new Array("images/image1.png","images/image2.png","images/image3.png","images/image4.png"); //聲明存儲圖片地址的數組
var IMG_WIDTH = 720; //存儲圖片寬度
var listLength = img.length; //存儲圖片個數
var listWidth = img.length * IMG_WIDTH; //存儲圖片列表寬度
document.getElementById('List').style.width = listWidth + "px"; //設置圖片列表的寬度
for(let i = 0; i < listLength; i++){ //添加li標籤
let temp = document.createElement("li");
temp.className = "img";
temp.style.backgroundImage = 'url(' + img[i] + ')';
document.getElementById('List').appendChild(temp);
}
4、利用JavaScript設置定時切換
最後，定義全局變量 listpos 以存儲圖片列表當前位置；
定義切換圖片的方法：
1、對圖片列表的位置進行運算以控制圖片列表的位置在合法範圍內，並每次運行更改當前位置的數值。
2、操作HTML DOM改變圖片列表的位置。
3、使用 setInterval() 方法設置定時運行（本文中設置時間爲3s）
var listpos = 0; //存儲圖片列表當前位置
function changeImg(){ //定義改變圖片列表位置的方法
listpos -= IMG_WIDTH;
listpos %= listWidth; //對圖片列表的位置進行運算
document.getElementById('List').style.left = listpos + "px"; //改變圖片列表位置
}
setInterval(changeImg, 3000); //設置定時執行函數
實例展示：
代碼總覽：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>網頁中的圖片輪播（二）</title>
</head>
<body>
<div class="viewArea"> <!--可視區域-->
<ul id="List" class="imgList"></ul> <!--圖片列表-->
</div>
<script language="javascript">
var img = new Array("images/image1.png","images/image2.png","images/image3.png","images/image4.png"); //聲明存儲圖片地址的數組
var IMG_WIDTH = 720; //存儲圖片寬度
var listLength = img.length; //存儲圖片個數
var listWidth = img.length * IMG_WIDTH; //存儲圖片列表寬度
var listpos = 0; //存儲圖片列表當前位置
document.getElementById('List').style.width = listWidth + "px"; //設置圖片列表的寬度
for(let i = 0; i < listLength; i++){ //添加li標籤
let temp = document.createElement("li");
temp.className = "img";
temp.style.backgroundImage = 'url(' + img[i] + ')';
document.getElementById('List').appendChild(temp);
}
function changeImg(){ //定義改變圖片列表位置的方法
listpos -= IMG_WIDTH;
listpos %= listWidth; //對圖片列表的位置進行運算
document.getElementById('List').style.left = listpos + "px"; //改變圖片列表位置
}
setInterval(changeImg, 3000); //設置定時執行函數
</script>
</body>
</html>
style.css
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
.viewArea{
position: relative;
width: 720px;
height: 405px;
overflow: hidden;
}
.imgList{
position: relative;
top: 0;
left: 0;
height: 405px;
transition: left 0.5s;
}
.img{
display: inline-block;
width: 720px;
height: 405px;
background-repeat: no-repeat;
background-size: 720px 405px;
}