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

最新推荐文章于 2024-06-26 10:34:16 发布

sinat_27747695

最新推荐文章于 2024-06-26 10:34:16 发布

阅读量2.9k

点赞数

分类专栏：前端技术文章标签： javascript

本文链接：https://blog.csdn.net/sinat_27747695/article/details/77900433

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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