首頁 > 文章 > web前端 > 如何用js實現網頁圖片輪播

如何用js實現網頁圖片輪播

一个新手原創: 2017-09-09 09:47:213781瀏覽

網頁展示中常用到圖片的輪流播放，這裡使用了四張長圖來進行圖片輪換，下面是代碼：

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實現網頁圖片輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：什麼是Js中的淺、深拷貝下一篇：什麼是Js中的淺、深拷貝

看更多