轮播图详细制作思路与过程

图片轮播我们经常在众多网站中看到，各种轮播特效有着非常美观炫酷的视觉效果。很多初学js的小伙伴都很心生向往。我也不例外，所以在此分享个写轮播图的思路和过程，有不足之处请多多指教，相互学习。

一.轮播图制作思路：

就是通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。
思路比较简单：
1.首先让一组图片绝对定位，让其重叠在一起，
2.通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应图片。
（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播图片。

二.具体代码实现

首先来看Html结构代码：

<div class="box"><ul id="boxul"><li><img src="data:images/f1.jpg" alt=""></li><li><img src="data:images/f2.jpg" alt=""></li><li><img src="data:images/f3.jpg" alt=""></li><li><img src="data:images/f4.jpg" alt=""></li><li><img src="data:images/f5.jpg" alt=""></li></ul><ol  id="boxol"><li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol><div class="prev" id="prev">prev</div><div class="next" id="next">next</div></div>

对其进行样式调整之后，图片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。

下面来看js的代码：

  *{padding: 0;margin: 0;}/* 长按标签会有蓝色背景 */*::selection {background: none;}li{list-style: none;}/* 子绝父相 */.box{width: 800px;height: 500px;margin: 50px auto;position: relative;}/* 设置所有的图片不显示 */.box ul li {width: 800px;height: 500px;position: absolute;opacity: 0;/* 过度显示图片 */transition: all .8s;}/* 设置第一张图片可见 */.box ul li:first-child {opacity: 1;}/*左右箭头*/.prev,.next {width: 80px;height: 40px;position: absolute;/* 背景色 */background-color: rgba(0, 0, 0, .7);/* 文字设置 */color: white;text-align: center;line-height: 40px;/* 位置 */top: 50%;margin-top: -20px;/* 鼠标移上去的效果 */cursor: pointer;}.next{right: 0;}.prev:active,.next:active {background-color: rgba(0, 0, 0, .5);}.prev:hover,.next:hover{background-color: rgba(0, 0, 0, .6);}/* 小方块的位置 */.box ol{position: absolute;right: 50px;bottom: 20px;}.box ol li {width: 20px;height: 20px;border: 1px solid #ccc;float: left;text-align: center;line-height: 20px;cursor: pointer;}.current{background-color: yellow;}img{width: 800px;height: 500px;}

js的具体代码如下：

 //1.1获取ul元素var boxul = document.getElementById("boxul")var lis = boxul.querySelectorAll("li")console.log(lis.length);//1.2获取olvar boxol = document.getElementById("boxol")//获取Ol下面的livar ol_lis = boxol.querySelectorAll("li")//console.log(ol_lis);//获得箭头var prev = document.getElementById("prev")var next = document.getElementById("next")//给ol的li添加点击事件for(var i = 0 ;i<ol_lis.length;i++){// console.log(i);//给oll的i设置indexol_lis[i].setAttribute("index",i)ol_lis[i].onclick = function(){for(var i = 0 ;i<ol_lis.length;i++){ol_lis[i].className = ""lis[i].style.opacity = 0}this.className = "current"var index = parseInt(this.getAttribute("index"))lis[index].style.opacity = 1}}//console.log(ol_lis);//2.给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1var index = 0;var old_li = lis[0]var new_linext.onclick = function(){index++// 到5时，切到第一张图if(index == lis.length){index = 0}old_li.style.opacity = 0new_li = lis[index]new_li.style.opacity = 1old_li = new_li//ol下li的颜色变化for(var i =0;i<lis.length;i++){ol_lis[i].className = ""}ol_lis[index].className = "current"}//3.给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1// console.log(index);// old_li.style.opacity =0// new_li = lis[index]// new_li.style.opacity = 1prev.onclick = function(){// 从第一张图到下标为4的图if(index == 0){index = lis.length}index--old_li.style.opacity = 0new_li = lis[index]new_li.style.opacity = 1old_li = new_li//ol下li的颜色变化for(var i =0;i<lis.length;i++){ol_lis[i].className = ""}ol_lis[index].className = "current"}

这里面实现的时候结合了css3的transition属性，让图片的切换有一个过渡效果

三、相关知识点。

1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。