图片轮播是怎么做的呢?
素材:你要轮流播放的图片1,图片2,图片3,。。。
代码:
要怎么实现图片轮播呢?
图片是怎么放到网上的呢?
使用<img>标签
这个标签里面可以放1张图片,
在一个时间间隔之后,
改变为另外一张图片。
怎么更改<img>标签内容呢?
怎么停留一段时间间隔呢?
setInterval(ChangeImg,2000);
使用这个函数,可以每隔2秒就调用ChangeImg函数,实现停留一段间隔。
怎么更改图片内容呢?
如果图片刚开始播放图片1
怎么换到图片2,图片3呢
首先,要获得所有的图片,所有的图片放入一个集合里面。
然后按下标顺序显示图片。
下标从0开始,先显示下标为0的图片,
隔了1段时间,再显示下标是1的图片,
依次实现轮播。
代码:
<html>
<script type="text/javascript">
ps=new Array("hua1.jpg","hua2.jpg","a.jpeg","hua3.jpg");
var i=0;
function hanshu()
{
i++;
if(i>=ps.length)
i=0;
document.getElementById("tu").src=ps[i];
}
setInterval(hanshu,1000);
</script>
<img id="tu" width=300px height=200px></img>
</html>
还有一个方法:
参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图实现</title>
<style type="text/css">
/*标题样式*/
p{
text-align: center;
font-size: 25px;
color: cadetblue;
font-family: fantasy;
}
.imgBox{
border-top: 2px solid cadetblue;
width: 50%;
height: 500px;
margin: 0 auto;
}
.imgBox img{
width: 60%;
height: 300px;
margin: 0 auto;
padding-top: 30px;
}
.img1{
display: block;
}
.img2{
display: none;
}
.img3{
display: none;
}
</style>
</head>
<body>
<p>图片轮播</p>
<div class="imgBox">
<img class="img-slide img1" src="hua1.jpg" alt="1">
<img class="img-slide img2" src="a.jpeg" alt="2">
<img class="img-slide img3" src="hua2.jpg" alt="3">
</div>
</body>
<script type="text/javascript">
var index=0;
//改变图片
function ChangeImg() {
index++;
var a=document.getElementsByClassName("img-slide");
if(index>=a.length) index=0;
for(var i=0;i<a.length;i++){
a[i].style.display='none';
}
a[index].style.display='block';
}
//设置定时器,每隔两秒切换一张图片
setInterval(ChangeImg,2000);
</script>
</html>
读者可以比较2份代码,从中体会学习。
本文来自投稿,不代表文案馆立场,如若转载,请注明出处:https://wpbbw.com/2873.html