在上一篇《网页中的照片轮播》中的示例并不能很好的应用于每一个场景,所以,本文介绍滑动轮播代码的编写方法。
对于滑动轮播,基本的原理是这样的:
注:
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;
}