原生JS實現圖片的輪流播放
阿新 • • 發佈:2019-02-19
網頁展示中常用到圖片的輪流播放,這裡使用了四張長圖來進行圖片輪放,下面是程式碼:
f7.html<!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"; /*輪放長度請看這裡*/ }