jquery实现网易云轮播（旋转木马）

一只方方
528 阅读1分钟

先上效果图

实现功能

  • 点击按钮和区域实现左右翻页切换
  • 鼠标移入小圆圈，跳转到对应图片

实现原理

  • 先将所有图片重叠居中
  • 设置三个类，左 中 右分别用来表示上图左中右图片的样式
  • 设置一个全局的i索引 j 用来作为当前图片的索引，控制小圆圈的同时移动
  • 根据索引将左 中 右 类添加到 对应图片上

代码实现（保姆级超详细版）

这里暂时将图片写死，大家可以根据自己的需求构建图片区域的html

引入jquery

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

html代码

<!-- 轮播最外层盒子 -->
  <div class="slider-box">
    <!-- 左按钮 -->
    <span class="click-btn btn-left"></span>
    <!-- 右按钮 -->
    <span class="click-btn btn-right"></span>
    <!-- 轮播内容 -->
    <ul class="banner-box">
      <li class="index-0">
        <div class="banner-item-img">
          <img class="g-img" src="https://p1.ssl.qhimg.com/dm/360_360_100/t0143bb07cd9e7f4c27.jpg" alt="" width=320 height=180>
        </div>
      </li>
      <li class="index-1">
        <div class="banner-item-img">
          <img class="g-img" src="https://p1.ssl.qhimg.com/dm/360_360_100/t015dbd1eb7d3020a2d.jpg" alt="" width=320 height=180>
        </div>
      </li>
      <li class="index-2">
        <div class="banner-item-img">
          <img class="g-img" src="https://p1.ssl.qhimg.com/dm/360_360_100/t01a5a18d8e0a7b465e.jpg" alt="" width=320 height=180>
        </div>
      </li>
      <li class="index-3">
        <div class="banner-item-img">
          <img class="g-img" src="https://p1.ssl.qhimg.com/dm/360_360_100/t0110cf9841abde14e4.jpg" alt="" width=320 height=180>
        </div>
      </li>
    </ul>
    <!-- 底部小圆点 写index属性-->
    <div class="point-list">
      <span index="0"></span>
      <span index="1"></span>
      <span index="2"></span>
      <span index="3"></span>
    </div>
    <!-- 左右两个盒子 用来做点击左右区域翻页的功能 -->
    <div class="rights"></div>
    <div class="lefts"></div>
  </div>

css代码

<style type="text/css">
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

/* 固定外层盒子的宽高 并相对窗口垂直居中 */
.slider-box {
  width: 540px;
  height: 194px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 确定中间盒子的大小（等于中加图片的大小）并居中*/
.banner-box {
  width: 320px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

/* 将图片重叠在一起*/
.banner-box>li {
  width: 320px;
  height: 180px;
  position: absolute;
  transition: 0.5s;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.banner-item-img {
  width: 100%;
  overflow: hidden;
  height: auto;
}

/* 左右按钮样式*/
.click-btn {
  z-index: 100;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}

.btn-right {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translate(0, -70%);
  background: url(https://p5.ssl.qhimg.com/t01e1d33624c57dfac8.png) no-repeat;
  background-image: -webkit-image-set(url(https://p5.ssl.qhimg.com/t01e1d33624c57dfac8.png) 1x, url(https://p5.ssl.qhimg.com/t01a2c04e3ea5591339.png) 2x);
}

.btn-right:hover {
  background: url(https://p5.ssl.qhimg.com/t01d5dfd3d1826893bf.png) no-repeat;
  background-image: -webkit-image-set(url(https://p5.ssl.qhimg.com/t01d5dfd3d1826893bf.png) 1x, url(https://p3.ssl.qhimg.com/t01867fd59c66312dda.png) 2x);
}

.btn-left {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translate(0, -70%);
  background: url(https://p3.ssl.qhimg.com/t0141255b01fe509565.png) no-repeat;
  background-image: -webkit-image-set(url(https://p3.ssl.qhimg.com/t0141255b01fe509565.png) 1x, url(https://p4.ssl.qhimg.com/t011a0cb742636efb24.png) 2x);
}

.btn-left:hover {
  background: url(https://p1.ssl.qhimg.com/t012805d4b1a3514d45.png) no-repeat;
  background-image: -webkit-image-set(url(https://p1.ssl.qhimg.com/t012805d4b1a3514d45.png) 1x, url(https://p4.ssl.qhimg.com/t011a0cb742636efb24.png) 2x);
}

/* 左图样式*/
.banner-box .index-0 {
  transform: translateX(-142px) scale(0.8);
  z-index: 1;
}

/* 中间图片提高层级*/
.banner-box .index-1 {
  z-index: 2;
}

/* 右图样式*/
.banner-box .index-2 {
  transform: translateX(142px) scale(0.8);
  z-index: 1;
}

/* 左右图蒙层*/
.banner-box .index-0:after,
.banner-box .index-2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  z-index: 5;
}

/* 圆圈固定位置*/
.point-list {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 100;
}

/* 圆圈样式*/
.point-list span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #e5e5e5;
  border-radius: 50%;
  margin-right: 10px;
}

/* 圆圈选中的状态*/
.point-list .change {
  background: #c1c1c1;
}

/* 右侧盒子的固定位置，透明*/
.rights {
  position: absolute;
  right: 0;
  top: 18px;
  height: 144px;
  width: 110px;
}
/* 左盒子的固定位置，透明*/
.lefts {
  position: absolute;
  left: 0;
  top: 18px;
  height: 144px;
  width: 110px;
}
</style>

jquery代码

<script>
  $(function () {
    // 获取元素
    var $leftBtn = $(".btn-left");
    var $rightBtn = $(".btn-right");
    var $img = $(".slider-box .banner-box li");
    var $point = $(".slider-box .point-list span");
    var $lefts = $(".lefts");
    var $rights = $(".rights");
    
    //默认将第一个圆圈添加选中的class样式
    $point.eq(0).addClass("change");	
    
    //圆圈变色函数
    function colors() {
      for (var i = 0; i < len; i++) {
        //移除所有圆圈的class
        $point.eq(i).removeClass();
      }
      if (j >= len) {
        j = 0;
      } else if (j < 0) {
        j = len - 1;
      }
      //给选中圆圈添加样式
      $point.eq(j).addClass('change');
    };
    
    //左翻页函数
    function leftPage() {
      //把数组的第一个添加到最后一个
      num.push(num[0]);
      //删除数组第一个元素
      num.shift();
      //重新给轮播元素添加对应的class
      for (var i = 0; i < len; i++) {
        $img.eq(i).removeClass();
        $img.eq(i).addClass(num[i]);
      }
      j--;
      colors();
    };
    
    //右翻页函数
    function rightPage() {
      //把数组最后一个元素添加到第一个
      num.unshift(num[len - 1]);
      //删除数组最后一个元素
      num.pop();
      //重新给轮播元素添加对应的class
      for (var i = 0; i < len; i++) {
        $img.eq(i).removeClass();
        $img.eq(i).addClass(num[i]);
      }
      j++;
      colors();
    };
    
    //跳转函数
    function jump(index) {
      //计算当前位置与目的位置的关系
      var now = num.indexOf('index-0');
      var dif = Math.max(index, now) - Math.min(index, now);
      if (index > now) {
        while (dif--) {
          rightPage();
        }
      } else {
        while (dif--) {
          leftPage();
        }
      }
    }
    
    //交互逻辑
    //len 轮播的长度
    //j 全局索引 控制小圆圈同时移动
    //num 用来存储轮播元素的class
    var num = [];
    var len = $img.length;
    var j = 0;
    var num = [];
    for (var i = 0; i < len; i++) {
      num.push('index-' + i);
    };
    
    //hover圆圈实现翻页
    $point.on('mouseenter', function () {
      var index = $point.index(this);
      jump(index);
    });
    
    //点击按钮翻页
    $rightBtn.on('click', rightPage);
    $leftBtn.on('click', leftPage);
    
    //点击左右区域翻页
    $rights.on('click', rightPage);
    $lefts.on('click', leftPage);
    
  });
  </script>

最后

由于业务需求，需要自己用jquery实现一个旋转木马轮播，对于我这个没实现过轮播的小白菜🥬真的很慌张啊，前期参考了很多文章和代码实现，都动手敲了敲，最后整理出我认为比较好的实现方式～～ 如果觉得有帮助到你，就给小白菜🥬点个赞鼓励鼓励我吧 哈哈啊哈哈哈哈哈哈

avatar
文章
阅读
粉丝