本文介绍了使用JavaScript创建轮播图的步骤，包括HTML结构、CSS样式和JS代码实现。详细讲解了如何设置图片列表、导航按钮，以及动态设置按钮位置和绑定点击事件。同时提到了轮播图在最后一张图片后添加新图片以实现无缝切换的关键点，以及在点击按钮时正确处理定时器的技巧。
完整的练习代码如下：（结合注释，理清思路），完整代码后面是具体的思路。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/tools.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 620px;
height: 338px;
background-color: blue;
padding: 10px 0;
margin: 150px auto 5px auto;
position: relative;
overflow: hidden;
}
#imglist{
width: 3100px;
list-style: none;
position: absolute;
left: 0;
}
#imglist li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 10px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
filter: alpha(apacity=50);
}
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript">
window.onload = function(){
//设置imglist的宽度
var imglist = document.getElementById("imglist");
var imgArr = document.getElementsByTagName("img");
imglist.style.width = imgArr.length*620 +"px";
//设置导航按钮的位置
var navDiv =document.getElementById("navDiv");
var main = document.getElementById("main");
navDiv.style.left = (main.offsetWidth - navDiv.offsetWidth)/2 +"px";
//默认第一张图片被选中
var allA = document.getElementsByTagName("a");
var index = 0;
allA[index].style.backgroundColor = "black";
//点击按钮使图片向左移动
for (var i=0; i<allA.length; i++) {
//这里将每执行一次的索引赋值给遍历的数组里面的num属性
allA[i].num = i;
allA[i].onclick = function(){
//关闭自动切换的定时器
clearInterval(timer);
//将数组每一次被遍历得到的索引赋给index
index = this.num;
// imglist.style.left = -620*index +"px";
//设置选中的a
setA();
//使用divMOve来切换图片
divMove(imglist, "left", -620*index, 35, function(){
//动画执行完毕，开启自动切换
autoChange();
});
};
}
//开启自动切换图片
autoChange();
//创建函数改变a的状态：没选中的就默认红色，被选中了的就变成黑色。
function setA(){
//判断a的点
if(index >= imgArr.length - 1){
index = 0;
//此时显示的是最后一张图片，最后一张和第一张一样，通过css将最后一张那个切换到第一张,直接将imglist的left值变为0
imglist.style.left = 0;
}
for(var i=0; i<allA.length; i++){
//这里allA[i]设置的是内联样式，如果颜色设置为红色的话，那么点击一次之后a的hover属性就失效了，
//将内两样式清空，则样式表里面的样式就能成功实现，hover就能正常运行。
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black";
}
//定时器胡标识
var timer;
//创建函数，用来控制图片的切换
function autoChange(){
timer = setInterval(function(){
//让图片的索引自增
index++;
//切换图片
divMove(imglist, "left", -620*index, 35, function(){
//修改导航点
setA();
});
},3000);
}
};
</script>
</head>
<body>
<!-- main的div作为大的容器 -->
<div id="main">
<!-- ul用来放置图片 -->
<ul id="imglist">
<li><img src="img/wall1.jpg" alt="加载失败了"/></li>
<li><img src="img/wall2.jpg" alt="加载失败了"/></li>
<li><img src="img/wall3.jpg" alt="加载失败了"/></li>
<li><img src="img/wall4.jpg" alt="加载失败了"/></li>
<li><img src="img/wall5.jpg" alt="加载失败了"/></li>
<li><img src="img/wall1.jpg" alt="加载失败了"/></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
tool.js文件如下：（里面包含了divMove方法，可以使轮播实现起来更加方便，注意理解）
//封装函数获取任意元素的任意样式，obj:元素名，name:样式名
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}
//应为函数在window.onload之外，所以要在次数声明定时器的标识
//将定时器的标识定义在全局变量中会带来不必要的麻烦，要让元素控制自己的定时器
// var timer;
/*
创建可以简单移动的函数
obj；要执行动画的对象
attr；要执行动画的样式
target：执行动画的目标位置
speed：移动速度
callback：回调函数，在动画执行完毕后执行
*/
function divMove(obj,attr,target,speed,callback){
clearInterval(obj.timer);
//判断速度的正负,如果目标位置的值大于当前位置，则不管，如果小于道歉位置的值，则对速度取反
var current = parseInt(getStyle(obj,"left"));
if(current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
//获取box原来的left值
var oldVal = parseInt(getStyle(obj,attr));
//在旧值的基础上增加
var newVal = oldVal + speed;
//判断移动方向及目标值的位置
if((speed < 0 && newVal < target) || (speed > 0 && newVal > target)){
newVal = target;
}
//将newVal赋值给box的对应样式
obj.style[attr] = newVal + "px";
//让div在移动到500px处停下
if(newVal == target){
clearInterval(obj.timer);
callback();
}
},50);
}
轮播图制作的思路：
-
在body中放置id为main的div块，在div中穿件屈戌列表ul并为其设置id：imglist，在对应的li中放入img标签，设置相应的轮播图片：
<div id="main"> <ul id="imglist"> <li><img src="img/wall1.jpg" alt="加载失败"/></li> <li><img src="img/wall2.jpg" alt="加载失败"/></li> <li><img src="img/wall3.jpg" alt="加载失败"/></li> <li><img src="img/wall4.jpg" alt="加载失败"/></li> <li><img src="img/wall5.jpg" alt="加载失败"/></li> </ul> </div> -
在style样式表中设置样式：清除全局margin和padding，为main的div设置宽、高和背景颜色，（本例子中使用的图片大小是600*338），使用margin属性调整div的位置。
设置ul的宽，去掉li前面的黑点。并开启ul的定位，左偏移量为0，若果不为其父元素也开启定位，则ul会相对documeng进行定位，为其父元素开启相对定位，ul才会相对其父元素进行定位。
开启定位之后会脱离文档流，li就会被覆盖，是用浮动属性来使li脱离文档流。
*{ margin: 0; padding: 0; } #main{ width: 620px; height: 338px; background-color: blue; padding: 10px 0; margin: 150px auto 5px auto; position: relative; overflow: hidden;//使超出的图片部分被剪切掉 } #imglist{ width: 3100px; list-style: none; position: absolute; left: 0; } #imglist li{ float: left; margin: 0 10px; } -
为了后面再加入图片不会影响到当前的布局，要在JS代码中动态设置imglist的宽度
//设置imglist的宽度 var imglist = document.getElementById("imglist"); var imgArr = document.getElementsByTagName("img"); imglist.style.width = imgArr.length*620 +"px"; -
添加导航按钮，按钮可点击，所以使用a标签来制作，并将按钮放置在新创建的id为navDiv的div块中，方便定位。（取消a标签的默认行为，href=“javascript:;”/href="#"）。
<div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> -
设置navDiv的样式：开启绝对定位，将其定位到父元素的底部，因为父元素设置了padding属性，所以父元素的底部应为底部往上10px。
navDiv中a标签的样式：开启浮动，使其脱离文档流，为其设置宽、高和背景颜色，margin属性设置a按钮左右的间距，这是透明度：opacity:0.5，兼容ie8的透明属：filter:alpha(apacity=50);鼠标移动到按钮上时颜色发生变化。
#navDiv{ position: absolute; bottom: 10px; } #navDiv a{ float: left; width: 15px; height: 15px; background-color: red; margin: 0 5px; opacity: 0.5; filter: alpha(apacity=50); } #navDiv a:hover{ background-color: black; } -
为了方便后期添加更多的按钮，在JS代码中动态设置按钮的位置，使放置按钮的div一直在放置图片的div底部居中显示：
计算方式：因为在动态设置按钮的div的位置之前，navDiv处在id为main的div的最左边，只要用main的宽度来减掉navDiv的宽度除以2，再将计算后的结果赋值给navDiv的左偏移量，那么nav的left值和right值就会相等，即可使其在main的底部居中显示。（在计算的时候是数值，记得拼串加上px）
//设置导航按钮的位置 var navDiv =document.getElementById("navDiv"); var main = document.getElementById("main"); navDiv.style.left = (main.offsetWidth - navDiv.offsetWidth)/2 +"px"; -
默认第一张图片被选中，使第一张图片对应的按钮背景色变成黑色
//默认第一张图片被选中 var allA = document.getElementsByTagName("a"); var index = 0; allA[index].style.backgroundColor = "black"; -
点击按钮使图片向左偏移：
注意：在遍历a的时候，为每一个按钮绑定单击函数。
for (var i=0; i<allA.length; i++) { allA[i].onclick = function(){ }; }若是像以上代码，用来为每一个按钮绑定单击响应函数，那么将无法成功，**因为for循环在按钮点击之前就已经执行为了。本例子中使用的图片一共有5张，那么allA[i]的值一直都会是5。**正确的绑定方式如下：
//点击按钮使图片向左移动 for (var i=0; i<allA.length; i++) { //这里将每执行一次的索引赋值给遍历的数组里面的num属性 allA[i].num = i; allA[i].onclick = function(){ //将数组每一次被遍历得到的索引赋给index index = this.num; imglist.style.left = -620*index +"px"; //使用divMOve来切换图片 }; } -
重点：后面的是对各种小问题的优化。需要注意的是：
- 在图片自动切换到最后一张时，需要使其从头开始轮换图片，就得在最后一张图片后面再添加一张图片（第一张图片），在跳转到新添加的最后一张图片的时候，瞬间跳转到真正的第一张图片，使其开支从头开始轮换。
- 在点击不同按钮的时候，显示不同的图片，需要用到定时器，点击按钮的时候需要清除定时器，在所点击按钮对应的图片执行完后，在调用自动切换图片的方法，使其从当前图片开始轮播。
如果上的内容对你有帮助的话，动动小手点个赞吧！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
