如何用js实现网页图片轮播

来源：59财经网

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

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>
	<p class="top_p">
	<h1 class="top_p_h1">srh</h1>
	</p>
	<p class="second_p">
	<p 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" /> 
 </p>
	</p>
	<p class="down_p">
	<p class="down_p_left"></p>
	<p class="down_p_right"></p>
	</p>
</body>
</html>

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

显示全文

全部频道

如何用js实现网页图片轮播