如何用js实现网页图片轮播
程序员文章站
2022-03-09 08:25:19
...
网页展示中常用到图片的轮流播放，这里使用了四张长图来进行图片轮放，下面是代码：
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实现网页图片轮播的详细内容，更多请关注其它相关文章！
上一篇： 如何让音乐播放控制条在js中实现
下一篇： Node module模块使用详解