<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<style>
*{padding:0margin:0}
#content {width:400pxheight:500pxmargin:10px autoposition:relativeborder:1px solid #000color:redfont-size:20px}
#title, #bottom{position:absolutewidth:400pxheight:30pxline-height:30pxtext-align:centerfont-size:20pxbackground:#f1f1f1}
#bottom{bottom:0cursor:pointer}
#bottom span{display:inline-blockwidth:15pxheight:15pxborder-radius:15pxbackground:#000text-align:centerline-height:15pxposition:relative}
#bottom span.active{background: #FFFF33}
#bottom span div {position:absolutewidth:110pxheight:110pxtop:-125pxleft:-46pxdisplay:none}
#bottom span div:after{content:''position:absoluteleft:49pxbottom:-12pxborder-top:7px solid #fffborder-right:5px solid transparentborder-bottom:5px solid transparentborder-left:5px solid transparent}
#bottom span img {width:100pxheight:100pxborder:5px solid #fff}
#left, #right{position:absolutewidth:60pxheight:60pxborder-radius:60pxline-height:60pxfont-size:60pxbackground:#FFFF66font-weight:boldtext-align:centertop:50%margin-top:-25pxcolor:#fffcursor:pointerfilter(opacity:70)opacity:0.7}
#left:hover,#right:hover{filter(opacity:100)opacity:1}
#left{left:0px}
#right{right:0px}
#img{width:400pxheight:500px}
</style>
<script>
window.onload = function () {
var bottom = $('bottom'),title = $('title'),
img = $('img'),left = $('left'),right = $('right')
var aSpan = bottom.getElementsByTagName('span')
var aDiv = bottom.getElementsByTagName('div')
var arr = ['图片一','图片二','图片三', '图片四']
var num = 0
// 初始化
picTab()
// 点击下一张
right.onclick = function () {
if (num === aDiv.length - 1) num = -1
num++
picTab()
}
// 点击上一张
left.onclick = function () {
if (num === 0) num = aDiv.length
num--
picTab()
}
function picTab() {
title.innerHTML = arr[num]
img.src = 'img/' + (num + 1) + '.png'
for ( var i = 0i <aSpan.lengthi++ ) {
aSpan[i].className = ''
}
aSpan[num].className = 'active'
}
// 鼠标移入移出显示缩略图
for ( var i = 0i <aSpan.lengthi++ ) {
aSpan[i].index = i
aSpan[i].onmouseover = function () {
aDiv[this.index].style.display = 'block'
}
aSpan[i].onmouseout = function () {
aDiv[this.index].style.display = 'none'
}
aSpan[i].onclick = function () {
num = this.index
picTab()
}
}
function $(id) { return document.getElementById(id)}
}
</script>
</head>
<body>
<div id="content">
<div id="title">带缩略图的轮播</div>
<div id="left"><</div>
<div id="right">></div>
<div id="bottom">
<span><div><img src="img/1.png"/></div></span>
<span><div><img src="img/2.png"/></div></span>
<span><div><img src="img/3.png"/></div></span>
<span><div><img src="img/4.png"/></div></span>
</div>
<img src="" id="img"/>
</div>
</body>
</html>
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料Sublime Text
01首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
