實現思路:
- 外層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
})()
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
