<!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>
工具/材料Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
