实现思路:
- 外层div设置为视图框
- 内层ul包含许多个li
- 每个li中,都放一张图片
HTML代码
<div class="slider">
<ul>
<li><img src="Algarve, Portugal.jpg"></li>
<li><img src="China, Asia.jpg"></li>
<li><img src="Niagara Falls.jpg"></li>
<li><img src="Provence, France.jpg"></li>
<li><img src="Rio de Janeiro, Brazil.jpg"></li>
<li><img src="Salar de Uyuni, Bolivia.jpg"></li>
</ul>
</div>
CSS代码
/*create 2016.8.04*/
*{
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height:300px;
overflow: hidden;
position: relative;
margin: 100px auto;
}
#slider ul{
width: 4800px;
position: relative;
}
#slider ul:after{
content: "";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float:left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
JS代码
/*create 2016.8.04*/
(function(){
var slider = document.getElementById("slider")
var imgul = document.getElementsByTagName("ul")[0]
var imglis = imgul.getElementsByTagName("li")
var index = 0
setInterval(function(){
if(index>=imglis.length){
index = 0
}
imgul.style.left = -(index*800) + 'px'
index++
},1000)//设置定时器间隔为1s
})()
