如何使用JS实现轮播图

一、js实现轮播图小结

随着网络上的网页和应用程序数量的增加，轮播图已成为必不可少的元素之一。实现一个轮播图需要使用JS/JQuery来生成动态效果。轮播图可以使用简单的HTML和CSS进行布局，但在早期JavaScript实现轮播时可能很难做到各种各样的动画效果。在这篇文章中，我们将讨论JS实现轮播图的思路和代码。

二、js实现轮播图的思路与代码

下面是轮播图的步骤:

1. 设置轮播图中要显示的图片。
2. 在HTML中添加用于显示轮播图图片的HTML元素。
3. 添加一个用于向前/向后移动的控件，这样用户就可以在轮播图中进行手动控制。
4. 使用JavaScript or JQuery编写函数来控制图片的滑动效果。包括手动移动与自动滚动效果。
5. 右侧的图片会在用户点击按钮时向右移动。
6. 左侧的图片会在用户点击按钮时向左移动。

下面是一个简单的JS实现轮播图的代码示例:

  $(function() {
    var width = $('ul li:first').width();
    var animateSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;
  
    var startSlide = function() {
      interval = setInterval(function() {
        $('ul').animate({'margin-left': '-=' + width}, animateSpeed, function(){
          currentSlide++;
          if (currentSlide === $('ul li').length) {
            currentSlide = 1;
            $('ul').css('margin-left', 0);
          }
        });
      }, pause);
    };

    startSlide();
  });

最终效果可以查看下面的预览:

三、原生js实现轮播图

使用原生JS实现轮播图的的方法和jQuery类似。下面是一个非常简单的示例:

  var sliderIndex = 0;
  var sliderTimer;

  function slider() {
    var slides = document.getElementsByClassName("slider");

    for (var i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    sliderIndex++;

    if (sliderIndex > slides.length) {
      sliderIndex = 1;
    }

    slides[sliderIndex - 1].style.display = "block";

    sliderTimer = setTimeout(slider, 2000);
  }

  slider();

四、js轮播图代码左右切换

下面是JS实现轮播图的代码，可以使用户可以通过“前进”和“后退”按钮手动进行切换。

  $(document).ready(function() {
    var slideIndex = 1;
    showSlides(slideIndex);

    $('.prev').click(function() {
      showSlides(slideIndex -= 1);
    });

    $('.next').click(function() {
      showSlides(slideIndex += 1);
    });

    function showSlides(n) {
      var i;
      var slides = $('.slides');
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = 'none';
      }
      slides[slideIndex-1].style.display = 'block';
  };
  });

五、自动轮播图怎么实现

下面是实现自动播放的代码。

  $(document).ready(function() {
    var slideIndex = 0;
    showSlides();

    function showSlides() {
      var i;
      var slides = $('.slides');
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      slides[slideIndex-1].style.display = 'block';
      setTimeout(showSlides, 2000); // 图片将在2秒后自动播放。
    }
  });

六、js实现轮播图代码

下面的JS代码提供了一个更完整、可配置的示例：

  var slider = {
    currentIndex: 0,
    nextIndex: 1,
    interval: 3000,
    width: 400,
    slides: [],
    intervalId: 0,
    stop: function() {
      clearInterval(this.intervalId);
    },
    createSlider: function() {
      var sliderEl = document.createElement('div');
      sliderEl.classList.add('slider');
      var sliderInnerEl = document.createElement('div');
      sliderInnerEl.classList.add('slider-inner');
      sliderEl.appendChild(sliderInnerEl);
      for (var i = 0; i < this.slides.length; i++) {
        var slideEl = document.createElement('div');
        slideEl.classList.add('slide');
        slideEl.style.backgroundImage = 'url(' + this.slides[i] + ')';
        sliderInnerEl.appendChild(slideEl);
      }
      var prevEl = document.createElement('button');
      prevEl.innerHTML = '«';
      var nextEl = document.createElement('button');
      nextEl.innerHTML = '»';
      sliderEl.appendChild(prevEl);
      sliderEl.appendChild(nextEl);
      var self = this;
      prevEl.onclick = function() {
        self.prev();
      };
      nextEl.onclick = function() {
        self.next();
      };
      this.el.appendChild(sliderEl);
      this.start();
    },
    start: function() {
      var self = this;
      this.intervalId = setInterval(function() {
        self.animate(self.currentIndex, self.nextIndex);
        self.currentIndex = self.nextIndex;
        self.nextIndex++;
        if (self.nextIndex >= self.slides.length) {
          self.nextIndex = 0;
        }
      }, this.interval);
    },
    animate: function(currentIndex, nextIndex) {
      var currentSlide = document.querySelector('.slider .slider-inner .slide:nth-child(' + (currentIndex + 1) + ')');
      var nextSlide = document.querySelector('.slider .slider-inner .slide:nth-child(' + (nextIndex + 1) + ')');
      currentSlide.style.opacity = 0;
      currentSlide.style.zIndex = 1;
      nextSlide.style.opacity = 1;
      nextSlide.style.zIndex = 2;
    },
    prev: function() {
      this.stop();
      this.nextIndex = this.currentIndex - 1;
      if (this.nextIndex < 0) {
        this.nextIndex = this.slides.length - 1;
      }
      this.animate(this.currentIndex, this.nextIndex);
      this.currentIndex = this.nextIndex;
      this.nextIndex--;
      if (this.nextIndex < 0) {
        this.nextIndex = this.slides.length - 1;
      }
      var self = this;
      setTimeout(function() {
        self.start();
      }, 1000);
    },
    next: function() {
      this.stop();
      this.animate(this.currentIndex, this.nextIndex);
      this.currentIndex = this.nextIndex;
      this.nextIndex++;
      if (this.nextIndex >= this.slides.length) {
        this.nextIndex = 0;
      }
      var self = this;
      setTimeout(function() {
        self.start();
      }, 1000);
    }
  };

  var el = document.querySelector('#slider-container');
  slider.el = el;
  slider.slides = [
    'https://images.unsplash.com/photo-1527185733542-5a810fda9664?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7815d0bdeed7ef1f2c1d903d560cf896&auto=format&fit=crop&w=634&q=80',
    'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5d5d7e4236e80dcdd0559944ff51a4a1&auto=format&fit=crop&w=1350&q=80',
    'https://images.unsplash.com/photo-1516440713609-67f2c5b4a188?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b322a023343e53bc9a84aa845c5e01bf&auto=format&fit=crop&w=1350&q=80'
  ];

  slider.createSlider();

七、js实现轮播图描述

在实现一个轮播图时，我们需要考虑以下关键点:

1. 轮播图的目的和风格：从广告横幅到产品展示，每个应用程序的轮播图都有一个不同的目的和风格。在构建轮播图时要考虑这些因素。
2. 图片的大小：如果在轮播图中使用的图片尺寸不一致，可能会导致轮播图出现问题。在构建轮播图时，必须要使用相同大小的图片。
3. 自动轮播时间：默认的自动轮播时间间隔是3000ms。这个值可以根据需要进行更改。
4. 样式与布局：可以使用CSS对轮播图进行样式和布局。这样可以确保轮播图与您的网站或应用程序的整体外观相一致。

八、js实现轮播图最简代码

下面是一个非常简单的轮播图代码：

  $(document).ready(function() {
    setInterval(function() {
      $('.slides img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.slides');
    }, 2000);
  });

九、js实现轮播图翻页的效果

下面是实现轮播图翻页效果的代码:

  $(document).on('ready', function() {
    var slideCount = $('.slider ul.slides li').length;
    var slideWidth = $('.slider ul.slides li:first-child').width();
    var slideHeight = $('.slider ul.slides li:first-child').height();
    var slideUlWidth = slideCount * slideWidth;
    
    $('.slider').css({ width: slideWidth, height: slideHeight });
    $('.slider ul.slides').css({ width: slideUlWidth, marginLeft: - slideWidth });
    $('.slider ul.slides li:last-child').prependTo('.slides ul');

    function moveLeft() {
      $('.slider ul.slides').animate({
        left: + slideWidth
      }, 500, function() {
        $('.slider ul.slides li:last-child').prependTo('.slider ul.slides');
        $('.slides ul.slides').css('left', '');
      });
    };

    function moveRight() {
      $('.slider ul.slides').animate({
        left: - slideWidth
      }, 500, function() {
        $('.slider ul.slides li:first-child').appendTo('.slider ul.slides');
        $('.slider ul.slides').css('left', '');
      });
    };

    $('a.control_prev').click(function() {
      moveLeft();
    });

    $('a.control_next').click(function() {
      moveRight();
    });
  });

在上面的代码中，每次需要显示下一张或上一张轮播图时，轮播图会向左或向右滑动，并将最后一张或第一张图移到下一次滑动的位置。