JavaScript实现无限轮播效果

JavaScript实现无限轮播效果攻略

1. 实现思路

实现无限轮播效果，主要思路是在轮播图的首尾各添加一张相同的图片，每次轮播到首尾两张相同的图片时，再次无缝链接到对面的一张同样的图片，就会呈现出无限轮播的效果。

具体步骤如下：

1. 获取轮播图的元素和所有轮播项的元素
2. 在轮播图的首尾各添加一张相同的图片
3. 设置轮播图元素的宽度为一个轮播项的宽度
4. 给轮播图元素添加transform属性，使其在水平方向上移动，达到轮播的效果
5. 监听transitionend事件，在每次轮播到最后一项或第一项时，使轮播图瞬间跳到对应的位置，实现无缝链接效果
6. 给轮播图元素添加定时器，定时轮播

2. 示范代码

下面提供两个示例代码，分别使用原生JavaScript和jQuery实现轮播图的无限轮播效果。

2.1 JavaScript实现代码

HTML部分：

<div class="swiper">
  <img src="img3.jpg">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img1.jpg">
</div>

JavaScript部分：

var swiper = document.querySelector('.swiper');
var items = document.querySelectorAll('.swiper img');
var length = items.length;
var index = 1;

swiper.style.width = items[0].offsetWidth + 'px';
swiper.style.transform = 'translate3d(-' + index * items[0].offsetWidth + 'px, 0, 0)';

swiper.addEventListener('transitionend', function() {
  if (index >= length - 1) {
    index = 1;
    swiper.style.transition = 'none';
    swiper.style.transform = 'translate3d(-' + index * items[0].offsetWidth + 'px, 0, 0)';
  } else if (index <= 0) {
    index = length - 2;
    swiper.style.transition = 'none';
    swiper.style.transform = 'translate3d(-' + index * items[0].offsetWidth + 'px, 0, 0)';
  }
});

setInterval(function() {
  index++;
  swiper.style.transition = 'transform .5s ease-in-out';
  swiper.style.transform = 'translate3d(-' + index * items[0].offsetWidth + 'px, 0, 0)';
}, 3000);

2.2 jQuery实现代码

HTML部分：

<div class="swiper">
  <img src="img3.jpg">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img1.jpg">
</div>

jQuery部分：

var swiper = $('.swiper');
var items = swiper.find('img');
var length = items.length;
var index = 1;

swiper.css('width', items.eq(0).width() + 'px');
swiper.css('transform', 'translate3d(-' + index * items.eq(0).width() + 'px, 0, 0)');

swiper.on('transitionend', function() {
  if (index >= length - 1) {
    index = 1;
    swiper.css('transition', 'none');
    swiper.css('transform', 'translate3d(-' + index * items.eq(0).width() + 'px, 0, 0)');
  } else if (index <= 0) {
    index = length - 2;
    swiper.css('transition', 'none');
    swiper.css('transform', 'translate3d(-' + index * items.eq(0).width() + 'px, 0, 0)');
  }
});

setInterval(function() {
  index++;
  swiper.css('transition', 'transform .5s ease-in-out');
  swiper.css('transform', 'translate3d(-' + index * items.eq(0).width() + 'px, 0, 0)');
}, 3000);

通过这两个示例代码的学习，相信你已经掌握了基本的JavaScript实现无限轮播效果的方法，可以在实际项目中应用。