基于JavaScript实现焦点图轮播效果

基于JavaScript实现焦点图轮播效果

1. 确定需求和设计方案

在实现焦点图轮播效果前，我们首先需要明确需求和设计方案。这里我们需要实现以下功能：

• 自动轮播：图片能够自动播放；
• 点击切换：点击焦点图下方的小圆点，能够切换到对应的图片；
• 左右切换：点击箭头按钮，能够左右切换到上一张或下一张图片；
• 动画效果：每次切换图片时，能够有过渡动画效果。

为了实现这些功能，我们需要采用以下技术和工具：

• HTML: 页面结构的搭建；
• CSS: 界面样式的设置；
• JavaScript：实现自动轮播、点击切换和左右切换；
• Git：版本控制工具。

2. 结构搭建和基本样式设置

在实现轮播效果前，我们需要先搭建页面结构，并对界面进行基本样式设置。这里我们采用HTML和CSS实现。

HTML代码如下所示：

<div class="slideshow">
    <div class="slideshow-inner">
        <div class="slideshow-item active">
            <img src="images/1.jpg" alt="">
        </div>
        <div class="slideshow-item">
            <img src="images/2.jpg" alt="">
        </div>
        <div class="slideshow-item">
            <img src="images/3.jpg" alt="">
        </div>
    </div>
    <div class="slideshow-pagination">
        <ul class="slideshow-pagination-list">
            <li class="slideshow-pagination-item active"></li>
            <li class="slideshow-pagination-item"></li>
            <li class="slideshow-pagination-item"></li>
        </ul>
    </div>
    <div class="slideshow-prev"></div>
    <div class="slideshow-next"></div>
</div>

CSS代码如下所示：

/* 轮播容器 */
.slideshow {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
}

/* 轮播图片容器 */
.slideshow-inner {
  position: relative;
  width: 300%;
  height: 100%;
  left: -100%;
  display: flex;
  transition: left .5s ease-in-out;
}

/* 轮播图片项 */
.slideshow-item {
  width: 33.33%;
  height: 100%;
}

/* 轮播小圆点容器 */
.slideshow-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* 轮播小圆点 */
.slideshow-pagination-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.slideshow-pagination-item {
  width: 10px;
  height: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background-color .5s ease-in-out;
}

.slideshow-pagination-item.active {
  background-color: #fff;
}

/* 左右切换按钮 */
.slideshow-prev,
.slideshow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,.5);
  cursor: pointer;
}

.slideshow-prev {
  left: 20px;
}

.slideshow-next {
  right: 20px;
}

.slideshow-prev:before,
.slideshow-next:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(images/icons.png);
  background-position: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slideshow-next:before {
  background-position: -20px 0;
}

3. 切换图片和自动轮播

在搭建好页面结构和设置好基本样式后，我们开始实现轮播效果。首先，我们需要实现切换图片的功能。实现方法如下：

• 定义一个变量i来记录当前显示的图片的索引；
• 点击小圆点进行切换时，改变i的值，并通过CSS动画移动到相应的位置；
• 点击左右箭头进行切换时，改变i的值，并通过CSS动画移动到相应的位置；
• 使用定时器实现自动轮播功能。

具体实现代码如下所示：

// 获取元素
var slideshow = document.querySelector('.slideshow');
var slideshowInner = document.querySelector('.slideshow-inner');
var slideshowItems = document.querySelectorAll('.slideshow-item');
var paginationItems = document.querySelectorAll('.slideshow-pagination-item');
var prevBtn = document.querySelector('.slideshow-prev');
var nextBtn = document.querySelector('.slideshow-next');

// 定义变量
var i = 0;
var timer = null;

// 初始化
paginationItems[0].classList.add('active');

// 切换图片
function switchSlide(index) {
  i = index;

  for (var j = 0; j < paginationItems.length; j++) {
    paginationItems[j].classList.remove('active');
  }

  paginationItems[i].classList.add('active');

  slideshowInner.style.left = -(i * 100 / slideshowItems.length) + '%';
}

// 小圆点点击事件
for (var j = 0; j < paginationItems.length; j++) {
  paginationItems[j].index = j;
  paginationItems[j].onclick = function() {
    switchSlide(this.index);
  }
}

// 左右箭头点击事件
prevBtn.onclick = function() {
  i--;
  if (i < 0) {
    i = slideshowItems.length - 1;
  }
  switchSlide(i);
}

nextBtn.onclick = function() {
  i++;
  if (i >= slideshowItems.length) {
    i = 0;
  }
  switchSlide(i);
}

// 自动轮播
timer = setInterval(function() {
  i++;

  if (i >= slideshowItems.length) {
    i = 0;
  }

  switchSlide(i);
}, 3000);

4. 示范说明

示例一

页面上有三幅图片和对应的小圆点和左右箭头按钮。打开页面后，图片开始自动轮播。用户可以点击小圆点或左右箭头按钮手动切换图片，并且每次图片切换时都会有动画效果。

代码演示见：https://codepen.io/w3c/pen/LYNbvXG

示例二

页面上有四幅图片和对应的小圆点和左右箭头按钮。打开页面后，图片开始自动轮播。用户可以点击小圆点或左右箭头按钮手动切换图片，并且每次图片切换时都会有动画效果。

代码演示见：https://codepen.io/w3c/pen/wvqJBrx