JavaScript实现轮播图案例

JavaScript实现轮播图是网页开发中比较常见的功能，它可以让一组图片或内容不断轮流展示，增强页面的交互性和视觉效果。下面是JavaScript实现轮播图的完整攻略：

步骤一：结构与样式

首先，在HTML页面中创建放置轮播图的容器，一般是一个div标签；然后在容器中添加若干个显示内容的div，每个div中放置一张图片、一段文本等具体内容。为了让轮播图正常展示，需要对容器和div设置样式，使其按照设计展示。

<div class="slide-container">
  <div class="slide-item">
    <img src="slide1.jpg" alt="slide1" />
    <p>这是第一张轮播图</p>
  </div>
  <div class="slide-item">
    <img src="slide2.jpg" alt="slide2" />
    <p>这是第二张轮播图</p>
  </div>
  <div class="slide-item">
    <img src="slide3.jpg" alt="slide3" />
    <p>这是第三张轮播图</p>
  </div>
</div>

<style>
.slide-container {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  display: none;
}
.slide-item img {
  width: 100%;
  height: 100%;
}
</style>

步骤二：JavaScript实现

接下来，使用JavaScript代码实现轮播图。具体实现步骤如下：

1. 自动播放

利用定时器函数setInterval来定期切换轮播图，为了保证用户体验，在每次切换前需要先停止之前的定时器。

var slideIndex = 0;  // 当前轮播图的下标
var slideInterval = 3000;  // 轮播时间间隔

function startSlide() {
  stopSlide();  // 停止之前的定时器
  var slideItems = document.getElementsByClassName('slide-item');
  if (slideIndex >= slideItems.length) {
    slideIndex = 0;  // 轮播图已展示完毕，从头开始
  }
  slideItems[slideIndex].style.display = 'block';
  slideIndex++;
  setTimeout(startSlide, slideInterval);  // 启动新的定时器
}

function stopSlide() {
  var slideItems = document.getElementsByClassName('slide-item');
  for (var i = 0; i < slideItems.length; i++) {
    slideItems[i].style.display = 'none';
  }
  clearTimeout();  // 清除之前的定时器
}

2. 左右切换

为了满足用户手动控制轮播图切换的需求，可以添加左右切换的按钮，切换按钮的单击事件监听函数中使用索引值的方式来切换轮播图。

function nextSlide() {
  slideIndex++;
  if (slideIndex >= slideItems.length) {
    slideIndex = 0;  // 如果已经展示完最后一张轮播图，从头开始
  }
  stopSlide();  // 停止自动播放
  displaySlide();
}

function prevSlide() {
  slideIndex--;
  if (slideIndex < 0) {
    slideIndex = slideItems.length - 1;  // 如果已经展示完第一张轮播图，回到最后一张
  }
  stopSlide();  // 停止自动播放
  displaySlide();
}

function displaySlide() {
  slideItems[slideIndex].style.display = 'block';
}

document.getElementById('next-btn').addEventListener('click', nextSlide);
document.getElementById('prev-btn').addEventListener('click', prevSlide);

示例说明一

下面我们以哔哩哔哩直播的轮播图为例，分析其实现过程。

结构和样式部分

<div class="banner">
  <a href=""><img src="//i0.hdslb.com/bfs/live/9ec7aa3d7f4c08bb35bdda5d06b9c8e569c4d844.jpg" alt="皮神重建x赛衣火速上新！" /></a>
  <a href=""><img src="//i0.hdslb.com/bfs/live/a6c437ee92ed1e3d36d8f99709dc573136161440.jpg" alt="B站手游再添新作：情人节爱意时装来袭！"/></a>
  <a href=""><img src="//i0.hdslb.com/bfs/live/1e252cdd4eb485a28a7073b8dd1bd8c687b6abc3.jpg" alt="嗨起来B～你听说过雀巢咖啡新品吗？"/></a>
  <div class="banner-pagination"></div>
</div>

<style>
.banner {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.banner img {
  width: 100%;
  height: 400px;
}
.banner-pagination {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
}
.banner-pagination span {
  display: inline-block;
  margin: 0 5px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
}
.banner-pagination span.active {
  background-color: #00A1D6;
}
</style>

JavaScript部分

var bannerIndex = 0;
var bannerInterval = 3000;
var bannerItems = document.querySelectorAll('.banner img');
var paginationItems = document.querySelectorAll('.banner-pagination span');

function playBanner() {
  var prevIndex = bannerIndex;
  bannerIndex++;
  if (bannerIndex >= bannerItems.length) {
    bannerIndex = 0;
  }
  bannerItems[prevIndex].classList.remove('active');
  bannerItems[bannerIndex].classList.add('active');
  paginationItems[prevIndex].classList.remove('active');
  paginationItems[bannerIndex].classList.add('active');
}

var bannerTimer = setInterval(playBanner, bannerInterval);

document.querySelector('.banner').addEventListener('mouseover', function() {
  clearInterval(bannerTimer);
});

document.querySelector('.banner').addEventListener('mouseout', function() {
  bannerTimer = setInterval(playBanner, bannerInterval);
});

for (var i = 0; i < paginationItems.length; i++) {
  paginationItems[i].addEventListener('click', function() {
    clearInterval(bannerTimer);
    var prevIndex = bannerIndex;
    bannerIndex = Array.prototype.indexOf.call(paginationItems, this);
    bannerItems[prevIndex].classList.remove('active');
    bannerItems[bannerIndex].classList.add('active');
    paginationItems[prevIndex].classList.remove('active');
    paginationItems[bannerIndex].classList.add('active');
  });
}

在这个实现中，引入了轮播图的分页指示器，同时在容器上绑定鼠标移入和移出事件，实现鼠标悬停自动停止轮播图的功能。

示例说明二

下面我们以京东E卡优惠页面为例，分析其实现过程。

结构和样式部分

<div class="card-slider">
  <ul class="card-list">
    <li class="card-item">
      <a href="" class="card-link">
        <div class="card-img">
          <img src="//img11.360buyimg.com/img/s750x337_jfs/t1/18156/30/8258/139565/5c66807aE74d87c51/866a465f629a7bd2.jpg" alt="360设计"/>
        </div>
        <div class="card-info">
          <h3 class="card-title">360设计卡活动</h3>
          <p class="card-desc">现在购买360设计卡，最高可享折扣8%</p>
        </div>
      </a>
    </li>
    <li class="card-item">
      <a href="" class="card-link">
        <div class="card-img">
          <img src="//img11.360buyimg.com/img/s750x337_jfs/t21138/351/255661067/214259/8239d4ec/5b1fc11aN33bae6b0.jpg" alt="公共英语"/>
        </div>
        <div class="card-info">
          <h3 class="card-title">公共英语考试</h3>
          <p class="card-desc">购买公共英语考试服务，享9.5折优惠</p>
        </div>
      </a>
    </li>
  </ul>
  <div class="card-pagination"></div>
</div>

<style>
.card-slider {
  position: relative;
  overflow: hidden;
  width: 750px;
  height: 337px;
}
.card-list {
  position: absolute;
  left: 0;
  top: 0;
}
.card-item {
  float: left;
  margin-right: 30px;
  width: 323px;
  height: 337px;
}
.card-item:last-child {
  margin-right: 0;
}
.card-img img {
  width: 323px;
  height: 187px;
}
.card-title {
  font-size: 18px;
}
.card-desc {
  font-size: 14px;
  color: #999;
}
.card-pagination {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
}
.card-pagination span {
  display: inline-block;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
}
.card-pagination span.active {
  background-color: #ff0000;
}
</style>

JavaScript部分

var sliderIndex = 0;
var sliderInterval = 3000;
var sliderItems = document.querySelectorAll('.card-item');
var paginationItems = document.querySelectorAll('.card-pagination span');

function playSlider() {
  var prevIndex = sliderIndex;
  sliderIndex++;
  if (sliderIndex >= sliderItems.length) {
    sliderIndex = 0;
  }
  for (var i = 0; i < sliderItems.length; i++) {
    sliderItems[i].style.opacity = 0;
  }
  sliderItems[prevIndex].classList.remove('slider-active');
  sliderItems[sliderIndex].classList.add('slider-active');
  paginationItems[prevIndex].classList.remove('active');
  paginationItems[sliderIndex].classList.add('active');
  sliderItems[sliderIndex].style.opacity = 1;
}

var sliderTimer = setInterval(playSlider, sliderInterval);

for (var i = 0; i < paginationItems.length; i++) {
  paginationItems[i].addEventListener('click', function() {
    clearInterval(sliderTimer);
    var prevIndex = sliderIndex;
    sliderIndex = Array.prototype.indexOf.call(paginationItems, this);
    for (var j = 0; j < sliderItems.length; j++) {
      sliderItems[j].style.opacity = 0;
    }
    sliderItems[prevIndex].classList.remove('slider-active');
    sliderItems[sliderIndex].classList.add('slider-active');
    paginationItems[prevIndex].classList.remove('active');
    paginationItems[sliderIndex].classList.add('active');
    sliderItems[sliderIndex].style.opacity = 1;
    sliderTimer = setInterval(playSlider, sliderInterval);
  });
}

在这个实现中，轮播图的切换效果采用了CSS3中的opacity属性，实现了平稳的动画效果。同时，实现了点击分页指示器切换轮播图的功能，使用数组的indexOf方法获取当前点击的指示器的下标。