轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料Sublime Text
01首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。
（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>最简单的轮播广告</title>
<style>
body, div, ul, li {
margin:
padding:
}
ul {
list-style-type: none
}
body {
background: #
text-align: center
font: px/px Arial
}
#box {
position: relative
width: px
height: px
background: #fff
border-radius: px
border: px solid #fff
margin: px auto
}
#box .list {
position: relative
width: px
height: px
overflow: hidden
border: px solid #ccc
}
#box .list li {
position: absolute
top:
left:
width: px
height: px
opacity:
transition: opacity .s linear
}
#box .list li.current {
opacity:
}
#box .count {
position: absolute
right:
bottom: px
}
#box .count li {
color: #fff
float: left
width: px
height: px
cursor: pointer
margin-right: px
overflow: hidden
background: #F
opacity: .
border-radius: px
}
#box .count li.current {
color: #fff
opacity: .
font-weight:
background: #f
}
</style>
</head>
<body>
<div id="box">
<ul>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
</ul>
<ul>
<li></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var box=document.getElementById('box')
var uls=document.getElementsByTagName('ul')
var imgs=uls[].getElementsByTagName('li')
var btn=uls[].getElementsByTagName('li')
var i=index=//中间量，统一声明；
var play=null
console.log(box,uls,imgs,btn)//获取正确
//图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=i<btn.lengthi++ ){
btn[i].className='' //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className='current'
}
for(i=i<imgs.lengthi++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=
imgs[a].style.opacity=
}
}
//切换按钮功能，响应对应图片
for(i=i<btn.lengthi++){
btn[i].index=i//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].onmouseover=function(){
show(this.index)
clearInterval(play)//这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
index++
index>=imgs.length&&(index=)//可能有优先级问题，所以用了括号，没时间测试了。
show(index)
},)
}
autoPlay()//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play)
}
box.onmouseout=function(){
autoPlay()
}
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
</script>
</body>
</html>
