jq实现旋转木马

JQ实现旋转木马

最近公司要做一个官网，可能会用到旋转木马的功能，自己并不喜欢用网上那些插件去实现，想自己写一个，在网上搜了搜大神们的实现方法，发现有部分是封装成插件，代码老长一段。还有一些实现方法太过于复杂。所以自己动手用简单的方法实现了下，大神们勿喷。

效果图

html代码

  <div class="warp">
    <div class="box">
      < img class="pic1" src="./img/pic1.jpg" alt="pic">
      < img class="pic2" src="./img/pic2.jpg" alt="pic">
      < img class="pic3" src="./img/pic3.jpg" alt="pic">
      < img class="pic4" src="./img/pic4.jpg" alt="pic">
      < img class="pic5" src="./img/pic5.jpg" alt="pic">
      < img class="pic6" src="./img/pic6.jpg" alt="pic">
      < img class="pic7" src="./img/pic7.jpg" alt="pic">
      < img class="pic8" src="./img/pic8.jpg" alt="pic">
      < img class="pic9" src="./img/pic9.jpg" alt="pic">
    </div>
  </div>
  <div class="btn">
    <div class="pre tt">向前</div>
    <div class="next tt">向后</div>
  </div>

css 代码

css 代码未做优化，实现时可以将代码量减小

body,html {
  background-color: #000000;
}
.warp {
  margin-top: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  height: 250px;
  display: flex;
  justify-content: center;
  position: relative;
}
img {
  width: 400px;
  height: 250px;
  position: absolute;
  -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent,transparent 70%,rgba(0,0,0,.5));
}
.pic1 {
  top: -200px;
  left: -400px;
  z-index: 96;
  opacity: 0.2;
}
.pic2 {
  top: -150px;
  left: -500px;
  z-index: 97;
  opacity: 0.4;
}
.pic3 {
  top: -100px;
  left: -400px;
  z-index: 98;
  opacity: 0.6;
} 
.pic4 {
  top: -50px;
  left: -250px;
  z-index: 99;
  opacity: 0.8;
}
.pic5 {
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 1;
}
.pic6 {
  top: -50px;
  left: 250px;
  z-index: 99;
  opacity: 0.8;
}
.pic7 {
  top: -100px;
  left: 400px;
  z-index: 98;
  opacity: 0.6;
}
.pic8 {
  top: -150px;
  left: 500px;
  z-index: 97;
  opacity: 0.4;
}
.pic9 {
  top: -200px;
  left: 400px;
  z-index: 96;
  opacity: 0.2;
}
.btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 100px;
  line-height: 30px;
  text-align: center;
}
.tt {
  width: 60px;
  height: 30px;
  background-color: #048666;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}
.pre {
  float: left;
}
.next {
  float: right;
}

jq 代码

实现原理比较简单， 创建一个数组， 将每张图片的位置，比如（top， left， z-index， opacity）等存进去，然后每次点击按钮的时候，改变数组中值的位置，就可以实现效果。

$(document).ready(function () {
  function Lunbo () {
    this.class = ['.pic1', '.pic2', '.pic3', '.pic4', '.pic5', '.pic6', '.pic7', '.pic8', '.pic9',] //每个img的class，也可以用id
    this.pic = [                                            //这里存下每张图片的位置等信息
      {top: '-200px', left: '-400px', zIndex: '96', opacity: 0.2},
      {top: '-150px', left: '-500px', zIndex: '97', opacity: 0.4},
      {top: '-100px', left: '-400px', zIndex: '98', opacity: 0.6},
      {top: '-50px', left: '-250px', zIndex: '99', opacity: 0.8},
      {top: '0px', left: '0px', zIndex: '100', opacity: 1},
      {top: '-50px', left: '250px', zIndex: '99', opacity: 0.8},
      {top: '-100px', left: '400px', zIndex: '98', opacity: 0.6},
      {top: '-150px', left: '500px', zIndex: '97', opacity: 0.4},
      {top: '-200px', left: '400px', zIndex: '96', opacity: 0.2},
    ]
  }
  Lunbo.prototype = {
    //点击向前
    ToPer: function () {
      let _this = this
      $('.pre').on('click', function () {  //监听pre向前按钮的点击事件
        let frist = _this.pic.shift()      //将数组的第一个取出来
        _this.pic.push(frist)            //将数组的第一个插入到数组的最后
        _this.movePic()              
      })
    },
    //点击向后
    ToNext: function () {
      let _this = this
      $('.next').on('click', function () {  //监听next向后按钮的点击事件
        let last = _this.pic.pop()         //将数组的最后一个取出来
        _this.pic.unshift(last)             //将数组的最后一个插入到数组的最前
        _this.movePic()
      })
    },
    //移动图片
    movePic: function () {
      let _this = this
      $.each(_this.class, function (i, n) {       //遍历 this.class 这个数组， i 是数组索引， n是每张图片的class
        $(n).animate(_this.pic[i])            //使用animate方法将每张图片与存好的位置数组中的每项相对应
      })
    },
    //轮播
    TimeChange: function () {
      let _this = this
      let setTime = setInterval(function () {
        let last = _this.pic.pop()
        _this.pic.unshift(last)
        _this.movePic()
      }, 1000)
      $('.pre').on('click', function () {            //点击的时候取消自动轮播
        clearInterval(setTime)
      })
      $('.next').on('click', function () {           //点击的时候取消自动轮播
        clearInterval(setTime)
      })
    },
    //调用
    do: function () {
      this.ToPer()
      this.ToNext()
      this.TimeChange()
    }
  }
  let lunbo = new Lunbo()
  lunbo.do()
})

原理很简单，实现方法也不难，所有轮播效果其实都可以使用这个原理，并不需要什么无限滚动，不需要去移动每张图片，也不需要去计算什么太多距离，位置等。