一、写在前面
全代码链接可以直接使用，解决工作之需
- 链接：https://pan.baidu.com/s/10l_uDpHwCTaEVhSA1BOEWw
- 提取码：c2w0
里面有加注释版及不加注释版，供学习使用
二、轮播效果及原理分析
原理分析
先看下这个图
原理：只要改变left值就可以实现轮播
那么改变谁的left值，改变装图片的ul(imgList)的值，接着向下看html代码
三、代码实现
3.1html代码
<body>
<!-- 创建一个外部div,来作为大容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/1.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>
对应图
盛放图片用ul及li
3.2CSS代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
//外部div
#outer{
width: 520px;
height: 334px;
margin: 50px auto;
background-color: greenyellow;
padding: 10px 0;
position: relative;
overflow: hidden;//将两边的图片切掉
}
//相框div
#imgList{
list-style: none;//去掉li标签前面的点
position: absolute;
}
#imgList li{
float: left;//li标签从横变竖
margin:0 10px;
}
//超链接div
#navDiv{
position: absolute;
bottom: 15px;
}
//超链接
#navDiv a{
float: left;
width:15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
filter: alpha(opacity=50);
}
//鼠标移入样式
#navDiv a:hover{
background-color: #000000;
}
</style>
3.3JS代码——最关键的部分
代码思路
- 1.动态改变相框(imgList)div宽度,使用户随意添加图片
- 2.动态改变超链接div，添加图片后，使其永远居中
- 3.实现手动点击播放，后自动播放
- 4.实现自动播放
具体代码
<script type="text/javascript">
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
//动态改变相框div宽度
imgList.style.width = 520*imgArr.length+"px";
//动态改变超链接div，使其永远居中
var imgDiv= document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//实现手动点击播放
var index = 0;
var allA = document.getElementsByTagName("a");
allA[index].style.background = "black";
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加一个num属性，辨别那个是第几个
allA[i].num =i;
//为超链接绑定单击
allA[i].onclick = function(){
//点击超链接时，关闭定时器
clearInterval(timer);
//获取点击的超链接索引,并将其设置为index
index = this.num;
//修改正在选中的a
setA();
//使用move函数来切换图片
move(imgList,"left",-520*index,50,function(){
//动画执行完毕，开启自动切换
autoChange();
});
}
}
//开启自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA(){
//判断当前索引是否是最后一张图片
if(index>=imgArr.length - 1){
//则将index设置为0
index =0;
//通过css将最后一张切换成第一张
imgList.style.left =0+"px";
}
//遍历所有a 并将背景颜色为红色
for(var i=0;i<allA.length;i++){
//设置内联样式优先级最高，此时鼠标移动hover被覆盖
allA[i].style.backgroundColor="";
}
//将选中的a 设置为黑色
allA[index].style.backgroundColor="black";
}
//创建一个函数，用来开启自动切换图片
//定义一个自动切换的定时器标识
var timer;
function autoChange(){
//开启一个定时器，定时切换图片
timer = setInterval(function(){
//使索引自增
index++;
index %=imgArr.length;
//执行动画，切换图片
move(imgList,"left",-520*index,20,function(){
//修改导航表
setA();
});
},3000)
}
}
</script>
其中封装了的move函数是上一篇博客，放在了tools.js外部文件中。
