The rotation of pictures is commonly used in web page display. Here, four long pictures are used for picture rotation. The following is the code:
f7.html
MyProject
srh
![]()
![]()
![]()
![]()
f7.css
.top_p{ width: 100%; height: 130px; /*background: red;*/ background-image: url(../image/Koala.jpg); text-align: center; } /*.top_p_h1{ text-align: center; } */ .second_p{ 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_p{ margin-top: 3px; } .down_p_left{ width: 25%; height: 500px; /*background: blue;*/ background-image: url(../image/Jellyfish.jpg); float: left; } .down_p_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"; /*轮放长度请看这里*/ }
The above is the detailed content of How to use js to implement web page image carousel. For more information, please follow other related articles on the PHP Chinese website!