原生JS实现图片的轮流播放

来源：互联网发布：淘宝网上怎么买二手货编辑：程序博客网时间：2024/06/08 05:03

网页展示中常用到图片的轮流播放，这里使用了四张长图来进行图片轮放，下面是代码：

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";  /*轮放长度请看这里*/    }

阅读全文

0 0