利用js和jquary制作轮播图

1 问题

我们在浏览淘宝或者京东等其他网页时，可以发现，在它们的首页有一个方框，里面的图片是自动播放的。而今天就是利用js和jquary制作这种具有轮播效果的图片。

2 方法

  1. 首先使用<div></div>标签创造一个盒子，然后使用<img src>将所有图片放到盒子里面。

  2. 使用<script></script>对图片进行设置。

    首先是将所有图片放在同一行，再将所有图片重在一起，方法：

    使用<margin>标签和top:0 left:0，这是设置成全部重合在左边，当然你也可以调到其他位置。

  3. 让图片动起来，可以理解成第一张图片显示完后，自动跳到最后一张。

    每一张图片显示完后自动跳到最后一张。

3 实验结果与讨论

通过实验、实践等证明提出的方法是有效的，是能够解决开头提出的问题。

代码清单 1

.box-img{
position: absolute;
margin-left: 10px;
margin-top: 582px;
top: 0;
left: 0;
opacity: 0;
transition: all 3s;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.box-img:nth-child(1){
opacity: 1;
}
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
var index=0;
setInterval(function(){
if(index==$(".box-img").length-1){
index=0;
$(".box-img").css("opacity","0");
$(".box-img").eq(index).css("opacity","1");
}else{
index++;
$(".box-img").css("opacity","0");
$(".box-img").eq(index).css("opacity","1");
}
},4000)
})
</script>

4 结语

第一段代码是对img的设置，第二段代码是图片轮播的代码。

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）

赞 (0)

相关推荐