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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何用js实现网页图片轮播，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2001字，纯文字阅读大概需要3分钟。

内容图文

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

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实现网页图片轮播的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的如何用js实现网页图片轮播全部内容，希望文章能够帮你解决如何用js实现网页图片轮播所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/282929.html

来源：【匿名】