轮播图实现

一、所用技术

JQuery、CSS、JavaScript

二、实现思路

1、img_ul类里面存放img标签，将需要展示的图片依次排开，在img_url中使用overflow:hidden的方式进行隐藏图片，每次只展示一张，通过控制img_url样式到外容器uls的距离来控制显示的图片。

2、无痕切换。在最后一张图片的后面拼上第一张图片，在第一张图片的后面拼上最后一张图片，以三张为例1.png、2.png、3.png，实际在页面中展示的是3.png、1.png、2.png、3.png、1.png，具体看下文代码。

当图片移动到最后一张的时候3.png，通过动画animate切换到下一张1.png，然后通过CSS样式瞬间切换到第一张1.png，达到无痕切换的效果，当图片移动到第一张的时候，原理相似，具体代码看后文代码。

三、效果图

轮播视频链接：https://6d79-mycloud-m7997-1301347483.tcb.qcloud.la/blogs/swiper.mp4

四、注意事项

1、图片设置宽度是300px,可根据需要自己变动，这个在使用过程中多注意。

2、用户根据需要可在左右切换图片的地方添加防抖节流函数，防止用户持续点击。

五、具体代码

1、HTML代码

<div class="parent">
  <div class="uls">
    <!-- 图片位置 -->
    <ul class="img_ul">
      <img src="images/3.png" />
      <img src="images/1.png" />
      <img src="images/2.png" />
      <img src="images/3.png" />
      <img src="images/1.png" />
    </ul>

    <!-- 原点位置 -->
    <ul class="litCir_ul"></ul>
  </div>

  <!-- 左右切换按钮 -->
  <div class="buttons">
    <span class="left"><</span>
    <span class="right">></span>
  </div>
</div>

2、JS代码

// 切换原点dom
let dotDoms = "";
let timer = undefined;
// 当前所在图片
let currentPage = 1;
// 当前所在点
let currentDot = 0;
// 点的数量总是比图片的数量少两个
for (let index = 0; index < $("img").length - 2; index++) {
  dotDoms += "<span class='dot' data-page=" + index + "></span>";
}
$(".litCir_ul").html(dotDoms);
// 第一个点是激活选中的状态
$(".dot").eq(0).addClass("active-dot");
// 鼠标移入的时候停止轮播图
$(".parent").mouseenter(function () {
  clearInterval(timer);
});
// 鼠标移出的时候开始轮播
$(".parent").mouseleave(function () {
  autoPlay();
});
// 左侧按钮点击事件
$(".left").click(function () {
  currentDot = currentDot === 0 ? $("img").length - 3 : --currentDot;
  if (currentPage <= 1 || currentPage === $("img").length - 1) {
    currentPage = $("img").length - 1;
    // 当切换到第一张图片时，先让图片动画左移，再让图片瞬间右移
    $(".img_ul").animate(
      {
        left: 0
      },
      function () {
        $(".img_ul").css({
          left: --currentPage * -300
        });
      }
    );
  } else {
    // 当不是第一张图片时，然图片动画右移
    $(".img_ul").animate({
      left: --currentPage * -300
    });
  }
  renderDots();
});
// 右侧按钮点击事件
$(".right").click(function () {
  currentDot = currentDot === $("img").length - 3 ? 0 : currentDot + 1;
  if (currentPage >= $("img").length - 1) {
    currentPage = 1;
  }
  $(".img_ul").animate(
    {
      left: ++currentPage * -300
    },
    function () {
      if (currentPage === $("img").length - 1) {
        $(".img_ul").css({
          left: "-300px"
        });
      }
    }
  );
  renderDots();
});

$(".dot").click(function (e) {
  currentPage = parseInt(e.currentTarget.dataset.page) + 1;
  currentDot = parseInt(e.currentTarget.dataset.page);
  console.log(currentPage);
  $(".img_ul").animate({
    left: (currentDot + 1) * -300
  });
  renderDots();
});
autoPlay();
// 自动轮播
function autoPlay() {
  timer = setInterval(function () {
    currentDot = currentDot === $("img").length - 3 ? 0 : currentDot + 1;
    // 当图片移动到最后一张图片的时候，当前图片变为1
    if (currentPage >= $("img").length - 1) {
      currentPage = 1;
    }
    $(".img_ul").animate(
      {
        left: ++currentPage * -300
      },
      function () {
        // 图片移动到最后一张的时候，图片瞬移到第一张1.png
        if (currentPage === $("img").length - 1) {
          $(".img_ul").css({
            left: "-300px"
          });
        }
      }
    );
    renderDots();
  }, 1000);
}

// 轮播圆点渲染
function renderDots() {
  $(".dot").removeClass("active-dot");
  $(".dot").eq(currentDot).addClass("active-dot");
}

3、CSS代码

.parent {
	width: 300px;
	position: relative;
}

ul {
	margin: 0;
	padding: 0;
}

.uls {
	position: relative;
	width: 300px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.img_ul {
	width: 1500px;
	position: relative;
        /* 展示图片 */
	left: -300px;
}

img {
	width: 300px;
	float: left;
}

.buttons {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.left {
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	left: 0;
	cursor: pointer;
}

.right {
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	right: 0;
	cursor: pointer;
}

.litCir_ul {
	position: absolute;
	text-align: center;
	bottom: 0;
	width: 100%;
}

.dot {
	background: white;
	display: inline-block;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	margin: 5px;
}

.active-dot {
	background: turquoise;
}