一個簡單的圖片輪播效果
photo.html頁面代碼，基本的HTML結構，在main中顯示圖片，此處圖片依次命名為1.jpg、2.jpg、3.jpg、4.jpg。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單圖片輪播</title>
<link rel="stylesheet"href="css/photo.css">
</head>
<body>
<div class="warpper">
<div class="header">
<div class="logo">photos of tutuj</div>
</div>
<div class="main">
<div id="pics">
<img src="img/1.jpg"/>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<script src="js/photo.js"></script>
然后對網頁進行一個非常簡單的CSS美化
.logo{
font-size:18px;
color:brown;
background-color: #F0F8FF;
font-family: "calisto mt";
}
/* 具體到元素標簽 */
#pics img{
margin-top:10px;
width:300px;
height:300px;
}
最后是js文件對圖片輪播進行控制。
//獲取內容
var pics=document.getElementById("pics");
var n=1;
setInterval(function(){
if(n>4) n=1;
pics.innerHTML="<img src='img/"+n+".jpg'/>";
n++;
},1000);