網頁展示中常用到圖片的輪流播放，這裏使用了四張長圖來進行圖片輪放，下面是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyProject</title>
<link rel="stylesheet" href="css/f7.css">
<script src="js/abc.js"></script>
</head>
<body>
<div class="top_div">
<h1 class="top_div_h1">srh</h1>
</div>
<div class="second_div">
<div id="transImageBox" class="trans_image_box">
<img class="trans_image" src="image/1.png" />
<img class="trans_image" src="image/2.png" />
<img class="trans_image" src="image/3.png" />
<img class="trans_image" src="image/4.png" />
</div>
</div>
<div class="down_div">
<div class="down_div_left"></div>
<div class="down_div_right"></div>
</div>
</body>
</html>f7.css
.top_div{
width: 100%;
height: 130px;
/*background: red;*/
background-image: url(../image/Koala.jpg);
text-align: center;
}
/*.top_div_h1{
text-align: center;
}
*/
.second_div{
width: 1366px;
height: 260px;
/*margin: 20px; */
overflow: hidden;
/*background-image: url(../image/Desert.jpg);*/
/*background: yellow;*/
margin-top: 3px;
}
.trans_image_box {
width: 5500px; /*注意這裏是根據圖片總長度來確定的，如果小於圖片總長度，會出現輪放空白的情況！*/
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.trans_image {
width: 1350px; /*這些根據需求可自定義*/
height:260px;
float: left;
margin-left: 5px;
}
.down_div{
margin-top: 3px;
}
.down_div_left{
width: 25%;
height: 500px;
/*background: blue;*/
background-image: url(../image/Jellyfish.jpg);
float: left;
}
.down_div_right{
width: 74%;
height: 500px;
/*background: green;*/
background-image: url(../image/Hydrangeas.jpg);
float: right;
}
abc.js
var int=self.setInterval("change()",2*1000);
var time=self.setInterval("clock()",3*1000);
var i=1;
function clock(){
i=i+1;
if(i==5){
i=1;
}
}
function change(){
var a=document.getElementById("transImageBox");
a.style.marginLeft=(1-i)*1366+"px"; /*輪放長度請看這裏*/
}