使用JavaScript实现轮播图

﹏ヽ暗。殇╰゛Y 2022-06-01 02:48 208阅读 0赞

> 经常能看到各种各样的图片轮播，下面就从简单到复杂一步步完成一个图片轮播效果

##### 效果1 #####

> 这一步需要实现的结果如下图所示
> 
> ![SouthEast][]  
> 
> 
> 关键点：
> 
> 1、多张照片叠加，每次只能看到一张照片。
> 
> 2、点击任意圆点，显示对应顺序的图片（点击第一个圆点，显示第一张图片,第一个圆点改为红色，点击第三个圆点，显示第三张图片，第三个圆点改为红色）。
> 
>   
> 
> 
> 第二点的关键处在于，如何通过JavaScript得到点击的是第几个圆点。转换一下思路，点击的圆点是父标签的第几个子元素。
> 
> 方法有二
> 
> 1是使用sourceIndex。浏览器给每个标签按顺序分配了sourceIndex，若要知道是父标签的第几个子元素，父子两个标签的sourceIndex相减即可。
> 
> 2是循环。设置变量index=1，确定点击的圆点，查找圆点前面的兄弟节点，每找到一个index++。
> 
>     var yuan;// 点击的圆点；
>     var index=0;
>     while(yuan=yuan.previousElementSilibing){
>       index++;
>     }
> 
> 完整代码如下
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <style type="text/css">
>             #img-3, #img-4, #img-2, #img-1 {
>                 width: 230px;
>                 height: 165px;
>                 position: absolute;
>             }
>             .img-hide {
>                 display: none;
>             }
>             .guide {
>                 height: 20px;
>                 position: absolute;
>                 top: 140px;
>             }
>             .guide span {
>                 width: 14px;
>                 height: 14px;
>                 display: inline-block;
>                 border-radius: 50%;
>                 background: #cdcdcd;
>                 cursor: pointer;
>             }
>         </style>
>     </head>
>     <body>
>     <div class="img">
>         <img src="../images/12.jpg"  class="img-1">
>         <img src="../images/13.jpg"  class="img-1 img-hide">
>         <img src="../images/14.jpg"  class="img-1 img-hide">
>         <img src="../images/15.jpg"  class="img-1 img-hide">
>     </div>
>     <div class="guide">
>         <span></span>
>         <span></span>
>         <span></span>
>         <span></span>
>     </div>
>     <script type="text/javascript">
>         var selectSpan = document.getElementsByClassName("guide")[0];
>         var selectImg = document.getElementsByTagName("img");
>         var nowSpan = document.getElementsByTagName("span");
>         nowSpan[0].style.background="red";
>         selectSpan.onclick = function (event) {
>             var theTarget = event.target;
>             var i = 0;
>             // 是父元素的第几个子元素
>                 while (theTarget = theTarget.previousElementSibling) {
>                     i++;
>                 }
>             for (var j = 0; j < nowSpan.length; j++) {
>                 if (i == j) {
>                     selectImg[j].style.display = "block";
>                     nowSpan[j].style.background = "red";
>                 } else {
>                     selectImg[j].style.display = "none";
>                     nowSpan[j].style.background = "#cdcdcd";
>                 }
>             }
>         }
>     </script>
>     </body>
>     </html>

##### 可以进一步完善的点 #####

> 1、可以在左右两个添加箭头，点击箭头切换图片，若当前显示的是第一张图片，点击向前的箭头显示最后一张图片
> 
> 2、图片自动切换
> 
> so，接着一步一步实现上面提到的吧！

##### **点击左右箭头，切换图片** #####

> 实现思路如下：定义变量imgIndex保存当前显示的是第几张图片，点击向前的箭头imgIndex--；点击向后的箭头imgIndex++;

>     // 点击向前的箭头
>     imgIndex--;
>     if(imgIndex<0){
>         imgIndex=imgNum-Math.abs(imgIndex);// imgNum图片数目
>     }
>     imgSwitch(imgIndex) // 调用图片切换展示函数
> 
>     // 点击向后的箭头
>     imgIndex++;
>     if(imgIndex>=imgNum){
>         imgIndex=imgIndex%imgNum;
>     }
>     imgSwitch(imgIndex);

> > 另外，因为还通过第几个圆点的颜色为红色（其他颜色，其他状况）来决定显示第几张图片，，所以在点击前后箭头或者圆点时需要同步imgIndex(显示的是第几张图片），解决方法也简单 imgIndex使用全局变量即可。

##### 图片自动切换 #####

> 实现思路也很简单，每隔一段时间自动修改imgIndex的值，自动调用imgSwitch()函数。

>   
>

>     setInterval(function(){
>     imgIndex++;
>     if(imgIndex>imgNum){
>        imgIndex=imgIndex%imgUnm;
>     }
>     imgSwitch(imgIndex);
>     },3000)
> 
> 完整效果查看地址： [这里][Link 1]  
>   
>

>   
> 
> 
>   
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
>

[SouthEast]: /images/20220601/51f03dda0af64ca29947b858567071aa.png
[Link 1]: http://htmlpreview.github.io/?https://github.com/jialuoJiang/imgCarousel/blob/master/carousel-3.html