在上一篇《网页中的照片轮播》中的示例并不能很好的应用于每一个场景，所以，本文介绍滑动轮播代码的编写方法。
对于滑动轮播，基本的原理是这样的：
注：
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;
}
1、本文不再介绍翻页摁扭与图片序号的编写方法
2、在您编写翻页摁扭时，先要使用 clearInterval 清除定时，在变更结束后再使用 setInterval 添加定时
3、 clearInterval 的参数是在调用 setInterval 时的返回值
4、如果您还有其他的见解，请您指教！
