Banner轮播图片实践

我就是我 2022-05-26 10:35 360阅读 0赞

**参考文章链接：**[手把手原生js简单轮播图][js]** **[https://www.cnblogs.com/LIUYANZUO/p/5679753.html][https_www.cnblogs.com_LIUYANZUO_p_5679753.html]

背景：在参考文章之前，知道轮播图的实现原理与计时器Interval，和多张图片排版相关。把多张轮播的图片视为一幅横向长图，通过容器布局调整显示视口的偏移量实现单图轮播。

1、布局应有两层嵌套container(div)->bannerList(div)->banner(Img)

bannerList作为放置一幅长图的容器，而container作为可见视口的容器

![20180429212756393][]

img{width: 450px;height:300px;margin:0 auto}
    #bannerList{width:1800px;height:300px;
       left: -450px; z-index: 1;position: absolute;  //放置4张图片，left的设值是为了显示第二张图片开始，且方便js的取值（js所有的offset为负值）
    }
    #bannerList img{float: left}
     #container {
        position: relative;width: 450px; height: 300px;
        border: 3px solid #333; overflow: hidden;  //container视口刚好是图片大小
       
            }

2、添加左右翻页按钮，以及圆点按钮

从参考文章学到了用span元素制作圆点，详情可参考文章

主要是用css样式属性边框弧度border-radius，而左右翻页使用&gt；和&lt；（新学到的技能哈~）

3、通过js实现功能

实现左右翻页功能：

事先获取翻页的按钮next、prev、bannerList和container的元素

与参考文章不一样的是，我这里的left属性不是在元素内定义的，而是通过CSS设置值，如果使用banner.style.top得到的是NAN，因此需要使用getComputedStyle(element)\['Attriubute'\]来获取当前元素的left位置。

var container=document.getElementById("container")
    EventUtil.addHandler(container,"click",function(event){
      var event=EventUtil.getEvent(event);
      var target=EventUtil.getTarget(event);
        switch(target.id){
           case "next": getNav(-450); break;
           case "prev": getNav(450); break;
       }
    
    });

然后为两个翻页按钮注册事件处理程序，这里是用了上一篇文章的跨浏览器的EventUtil对象中的方法（详情看上一篇）

当点击next，bannerList向右平移450px，则显示另一张图片；prev同理。

\*值得注意这里的偏移是相对于左边第一张图位置，因此负值表示将第一张图向左移动Xpx，而视觉看出来的是bannerList向右平移Xpx。

自动轮播功能：

setInterval( )&clearInterval( )

第一个方法的参数：函数&每隔一段时间；

第二个方法的参数：setInterval赋值的变量，var timer=setInterval( );则timer为参数

var timer;
    function autoPlay() {
        timer = setInterval(function () {
            next.οnclick=getNav(-450);
        }, 1500)
    }
    autoPlay();
    container.οnmοuseοver=function(){
        clearInterval(timer);
    }
    container.οnmοuseοut=function(){
        autoPlay();
    }

参考文章里是直接使用onclick();而在实际运行时候，会抛出错误说这不是一个函数，因此需要为onclick绑定一个函数。

onmouseover和onmouseout是显示当鼠标放在图片上时，可以停止自动轮播观看图片。

\*虽然这两个功能事后看来十分简单，但对于我在实现时，耗时也需要蛮长时间，这可能就是实践与看的不同。以我的理解阅读完参考文章后，根据自己理解的实现原理，通过自己重新编写代码来实现功能，仅为学习以及临摹，不存在抄袭的意图。该文为原创，但由于这篇带有参考的文章，如侵删。

再次感谢参考文章的作者让我学习到轮播的简单实现！

**参考文章链接：**[手把手原生js简单轮播图][js]** **[https://www.cnblogs.com/LIUYANZUO/p/5679753.html][https_www.cnblogs.com_LIUYANZUO_p_5679753.html]

[js]: http://www.cnblogs.com/LIUYANZUO/p/5679753.html
[https_www.cnblogs.com_LIUYANZUO_p_5679753.html]: https://www.cnblogs.com/LIUYANZUO/p/5679753.html
[20180429212756393]: /images/20220526/e1421d322872454599c63a59a6edbbb8.png