<!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>
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料Sublime Text
01首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
如下代码可以实现，不过你首先需要引用Jquery，我使用的是jquery-1.7.1.min.js
支持两个div或多个div的淡入淡出切换：
<div id="imgbox"><div style="width:100pxheight:100pxbackground-color:red"></div>
<div style="width:100pxheight:100pxbackground-color:blue"></div>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#imgbox div").fadeOut(0).eq(0).fadeIn(0)
var i = 0
setInterval(function(){
if($("#imgbox div").length > (i+1)){
$("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000)
i++
}
else{
$("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000)
i = 0
}
},2000)
})
</script>
