h5代码：
<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>
css代码：
<style type="text/css">@-webkit-keyframes move{0%{left:-500px}100%{left:0}}#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px autooverflow:
hidden}#list{position:absoluteleft:0top:0padding:0margin:0-webkit-animation:5s move infinite linearwidth:200%}#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pinkcolor:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}#wrap:hover #list{-webkit-animation-play-state:paused}</style>
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
<!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>
