011_JS_Wheels/Slides.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>Slides</title>
    <style>
      .mySlides{
        overflow: hidden;
        position: relative;
      }
      .mySlides ol{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        transition: transform 0.5s;
      }

      .mySlides ol>li img{
        vertical-align: top;
      }
      .mySlides-prev{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
      .mySlides-next{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div class=slides>
      <ol>
        <li><img src="https://i.loli.net/2018/01/03/5a4c93e92b0e1.png">
        </li>
        <li><img src="https://i.loli.net/2018/01/03/5a4c93e931f93.png">
        </li>
        <li><img src="https://i.loli.net/2018/01/03/5a4c93e938b6b.png">
        </li>
        <ol>
    </div>
  </body>
  <script>
    class Slide {
      constructor(options) {
        this.options = options
        this.$element = $(this.options.element)
        this.$element.addClass('mySlides')
        this.timer = undefined
        this.initHtml()
        this.bindEvents()
        this.go(0)
        if (this.options.autoPlay) {
          this.play()
        }
      }

      initHtml() {
        this.width = this.$element.children('ol').children('li').width()
        this.$element.width(this.width)
        this.$prev = $('<button class="mySlides-prev">上一张</button>')

        this.$element.append(this.$prev)
        this.$next = $('<button class="mySlides-next">下一张</button>')

        this.$element.append(this.$next)
      }

      bindEvents() {
        this.$prev.on('click', () => this.prev())
        this.$next.on('click', () => this.next())
        this.$element.on('mouseenter', () => {
          this.stop()
        }).on('mouseleave', () => {
          this.play()
        })
      }

      go(index) {
        let $ol = this.$element.children('ol')
        let $items = $ol.children('li')
        if (index >= $items.length) {
          index = 0
        } else if (index < 0) {
          index = $items.length - 1
        }
        $ol.css({
          transform: `translateX(${-index*this.width}px)`
        })
        this.current = index
      }

      next() {
        this.go(this.current + 1)
      }

      prev() {
        this.go(this.current - 1)
      }

      play() {
        this.timer = setInterval(() => {
          this.go(this.current + 1)
        }, 2000)
        console.log('this.timer')

        console.log(this)
      }

      stop() {
        console.log(this)
        window.clearInterval(this.timer)
      }
    }

      // -----------------------------------------------------
    // ----------------------- 使用 -------------------------
    // -----------------------------------------------------
    var slide = new Slide({
      element: '.slides',
      autoPlay: false,
      controls: false,
      pager: false
    })
  </script>
</html>