Js实战--01轮播图

Js实战–01轮播图

效果展示网站：

一、HTML布局

<div id="wrap">
        <div id="imgs">
            <a href="javascript:void(0);"><img alt="" src="img/1.jpg" width="1023" height="400"></a>
            <a href="javascript:void(0);"><img alt="" src="img/2.jpg" width="1023" height="400"></a>
            <a href="javascript:void(0);"><img alt="" src="img/3.jpg" width="1023" height="400"></a>
        </div>
        <div id="paging">
            <span class="previous">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        <ul id="btn">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

二、样式

1.代码

  * {
            margin: 0;
            padding: 0;
            outline: 0;
            border: 0;
            vertical-align: baseline;
        }

        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        #wrap {
            width: 1023px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 100px auto 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        #imgs a {
            position: absolute;
            display: none;
        }

        #paging span {
            display: block;
            width: 42px;
            height: 72px;
            font-size: 36px;
            color: white;
            position: absolute;
            top: 50%;
            margin-top: -36px;
            text-align: center;
            line-height: 72px;
            font-weight: bold;
            background-color: rgba(33, 33, 33, .5);
            cursor: pointer;
            font-family: serif;
        }

        #paging span:hover {
            background-color: rgba(33, 33, 33, .8)
        }


        #paging .previous {
            left: 0;
        }

        #paging .next {
            right: 0;
        }

        #btn {
            overflow: hidden;
            position: absolute;
            bottom: 16px;
            left: 50%;
            margin-left: -39px;
        }

        #btn li {
            float: left;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
            margin: 0 5px;
        }

        #btn li.on {
            background-color: orange;
        }

2.页面效果图

三、Js特效

1.普通函数方法

 // 页面初始化显示第一张图片
      imgs[0].style.display = "block";
      btn[0].className = "on";

      // 点击圆点切换
      for (let i = 0; i < btn.length; i++) {
        btn[i].index = i;
        btn[i].onclick = function () {
          let that = this;
          checkout(function () {
            index = that.index;
          });
        };
        //禁止拖拽图片
        imgs[i].ondrag = imgs[i].onmousedown = function (e) {
          e = e || event;
          e.preventDefault
            ? e.preventDefault()
            : (window.event.returnValue = false);
        };
      }

      //箭头切换
      for (let i = 0; i < paging.length; i++) {
        // 下一张
        if (i) {
          paging[i].onclick = function () {
            checkout(function () {
              index++;
              index = index % imgs.length;
            });
          };
        } else {
          paging[i].onclick = function () {
            checkout(function () {
              index--;
              if (index < 0) index = imgs.length - 1;
            });
          };
        }
      }

      auto();

      // 图片自动切换
      function auto() {
        timer = setInterval(function () {
          checkout(function () {
            index++;
            index = index % imgs.length;
          });
        }, 1000);
      }

      function checkout(callback) {
        imgs[index].style.display = "none";
        btn[index].className = "";
        callback && callback();
        imgs[index].style.display = "block";
        btn[index].className = "on";
      }

      // 鼠标不位于轮播图上时清除定时器，停止轮播
      wrap.onmouseover = function () {
        clearInterval(timer);
      };

      // 鼠标位于轮播图上时，设置定时器
      wrap.onmouseout = function () {
        auto();
      };

2.面对对象封装法

  // 面对对象
        function Banner(wrap, imgs, paging, btn) {
            this.wrap = wrap;
            this.imgs = imgs;
            this.paging = paging;
            this.btn = btn;
            this.timer = 0;
            this.index = 0;
            this.init();
        };

        Banner.prototype = {
            init: function () {
                this.imgs[this.index].style.display = "block";
                this.btn[this.index].className = "on";
                this.notDrag();
                this.auto();
                this.wrapHover();
                this.slideClick();
                this.pagingClick();
            },

            slideClick: function () {
                let that = this;
                for (let i = 0; i < this.btn.length; i++) {
                    this.btn[i].index = i;
                    this.btn[i].onclick = function () {
                        let That = this;
                        that.checkOut(function () {
                            that.index = That.index;
                        })
                    }
                }
            },

            pagingClick: function () {
                let that = this;
                for (let i = 0; i < this.paging.length; i++) {
                    if (i) {
                        this.paging[i].onclick = function () {
                            that.checkOut(function () {
                                that.index++;
                                that.index = that.index % that.imgs.length;
                            })
                        }

                    } else {
                        this.paging[i].onclick = function () {
                            that.checkOut(function () {
                                that.index--;
                                if (that.index < 0) that.index = that.imgs.length - 1;
                            })
                        }

                    }
                }
            },

            auto: function () {
                let that = this;
                this.timer = setInterval(function () {
                    that.checkOut(function () {
                        that.index++;
                        that.index = that.index % that.imgs.length;
                    })
                }, 1000)
            },

            notDrag: function () {
                for (let i = 0; i < this.imgs.length; i++) {
                    this.imgs[i].ondrag = this.imgs[i].onmousedown = function (e) {
                        e = e || event;
                        e.preventDefault ? e.preventDefault() : window.event.returnValue = false;
                    }
                }
            },

            checkOut: function (callback) {
                this.imgs[this.index].style.display = "none";
                this.btn[this.index].className = "";
                callback && callback();
                this.imgs[this.index].style.display = "block";
                this.btn[this.index].className = "on";

            },

            wrapHover: function () {
                let that = this;
                this.wrap.onmouseenter = function () {
                    clearInterval(that.timer);
                };
                this.wrap.onmouseleave = function () {
                    that.auto();
                }
            }
        }

        new Banner(wrap, imgs, paging, btn);