js渐变轮播图的实现方法
渐变切换主要运用css的opacity属性，结合transition实现渐变过渡。
html结构方面大体分为三部分:
①图片展示部分(主体)
②左右切换部分
③轮播焦点部分
<div class="banner">
<div class="ban-image">
<img class="on" src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/9.jpg" />
<img src="img/10.jpg" />
</div>
<div class="btn">
<div class="btn-left"><</div>
<div class="btn-right">></div>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
如果想要让轮播图的图片禁止拖动，可以在或里加上οndragstart=“return false”，如<html ondragstart="return false">
css样式方面，主要思想是用绝对定位把所有图片叠起来，opacity预设为0，通过改变opacity为1来显示当前图片。轮播焦点的滚动也采用上述方法。
body{
user-select: none; /* 禁止用户选中元素 */
-webkit-user-select: none;
}
给最外层盒子添加相对定位
.banner{
position: relative;
width: 350px;
height: 500px;
margin: 50px auto;
}
定位html①②③部分的位置：
/* 第①部分 */
.ban-image{
position: absolute;
width: 100%;
height: 100%;
}
/* 第②部分 */
.btn-left, .btn-right{
position: absolute;
top: 50%;
width: 50px;
height: 60px;
margin-top: -30px;
background-color: rgba(0,0,0,0.6);
font-size: 24px;
text-align: center;
line-height: 60px;
color: #fff;
cursor: pointer;
}
.btn-left{
left: -50px;
border-radius: 50% 0 0 50%;
}
.btn-right{
right: -50px;
border-radius: 0 50% 50% 0;
}
/* 第③部分 */
.tab{
position: absolute;
width: 61%;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
剩下css的是外观样式，你们按着自己喜欢的来，在这里就不赘述了
接下来讲讲最重要的js部分。
其主要思想也很简单，但是估计一些刚入门的小伙伴会直接操作dom改变元素的opacity值。而本文讲的是另一种更好的方法，就是事先写一个不存在的class名，给这个class写上让图片显示的样式。最后只要在js里挨个给图片添加这个class名就能实现轮播了。大体步骤如下:
①首先获取dom里面需要操作的元素。
var oBtnLeft = document.querySelector('.btn-left');
var oBtnRight = document.querySelector('.btn-right');
var aImgs = document.querySelectorAll('.ban-image img');
var aLi = document.querySelectorAll('.tab li');
②给左右切换键添加点击事件。（以向右移动为例）
/* 预先写js需要添加的class以及其样式，第一个控制图片，第二个控制轮播焦点 */
.ban-image img.on{
opacity: 1;
}
.tab li.on{
background-color: #f70;
}
// 向右移动
var index = 0; // 初始化数组下标，让轮播每次刷新从第一张开始播放
oBtnLeft.onclick = function() {
aImgs[index].className = ''; //每次切换让上一张图片变回完全透明，也就是让其class名再次为空
aLi[index].className = '';
index++;
if(index > 9){ //当图片播到最后一张，回到起点
index = 0;
}
aImgs[index].className = 'on';
aLi[index].className = 'on';
}
在这里补充一下另一个判断方法，用求模的方法判断，同样能达到一样的判断效果（当index超过 9 时index变回零）
if(index > 9){
index = 0;
}
index %= 10; (与上三行代码效果一样)
// 1/10 = 0 余 1;
// 2/10 = 0 余 2;
// 3/10 = 0 余 3;
// .....
// 9/10 = 0 余 9;
// 10/10 = 1 余 0;
向左移动的代码也差不多，只是index自加改为自减，判断条件改为if(index < 0){ index = 9; }
那么如何实现焦点切换图片呢？
我们可以写一个循环，让每个焦点都产生点击事件
for(var i=0;i<=9;i++){
aLi[i].num = i; // 给每一项li对象添加一个自定义属性，用于存放数组下标
aLi[i].onclick = function(){
}
}
每次点击焦点先遍历焦点擦除焦点颜色（当前播放图片所表示的焦点颜色）
for(var i=0;i<=9;i++){
aLi[i].num = i;
aLi[i].onclick = function(){
for(var j=0;j<=9;j++){
aLi[j].className = '';
aImgs[j].className = '';
}
}
}
然后让给当前的图片和焦点添加class名“on”
for(var i=0;i<=9;i++){
aLi[i].num = i;
aLi[i].onclick = function(){
for(var j=0;j<=9;j++){
aLi[j].className = '';
aImgs[j].className = '';
}
this.className = 'on';
aImgs[this.num].className = 'on';
index = this.num; //让下一张播放的图片为焦点选择的图片的下一张，
// 没有这一句那么每次点击下一张播放会从第一张开始
}
}
如何实现轮播图自动轮播
这个更简单了，只需给一个定时器（setInterval）就行，定时器里的函数就用向右移动的函数，如每 3 秒换下一张图片，那么写法如下：
function() {
// console.log(aImgs);
aImgs[index].className = '';
aLi[index].className = '';
index++;
if(index > 9){
index = 0;
}
aImgs[index].className = 'on';
aLi[index].className = 'on';
}
完毕！效果如下
