轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料Sublime Text
01首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码；html中的代码：
<div id="box">
<div id="woZaiHouDun" class='hide' >
<a id="btnLeft" href='javascript:void(0)'></a>
<a id="btnRight" href='javascript:void(0)'></a>
<ul>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
</ul>
</div>
js中的代码：
ar t=null
function woZaiHouDun(){
var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]
var aLi = oUl.getElementsByTagName('li')
oUl.innerHTML += oUl.innerHTML
oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'
var oBtnLeft = document.getElementById('btnLeft')
var oBtnRight = document.getElementById('btnRight')
var iTarget = 0
var ispeed = -3
oBtnLeft.onclick = function(){
ispeed = 3
}
oBtnRight.onclick = function(){
ispeed = -3
}
t=setInterval(function(){
iTarget = oUl.offsetLeft -ispeed
if( iTarget <- oUl.offsetWidth/2){
oUl.style.left =0 +'px'
iTarget = oUl.offsetLeft -ispeed
}
if( iTarget >0){
oUl.style.left =- oUl.offsetWidth/2 +'px'
iTarget = oUl.offsetLeft -ispeed
}
oUl.style.left =iTarget +'px'
},30)
}
这样是能实现轮播的。
