利用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）