js实现图片轮播效果学习笔记

下面是“js实现图片轮播效果学习笔记”的详细攻略。

什么是图片轮播效果？

图片轮播效果是一种常见的前端交互效果，它通常被用于网站首页的展示或者是产品推广的页面。通常，图片轮播效果由若干张图片组成，图片会在页面上自动进行轮播，并提供一些控制按钮供用户手动切换图片。

实现图片轮播效果的基本步骤

实现图片轮播效果的基本步骤大致如下：

1. 编写HTML和CSS代码，实现轮播区域的基本布局和样式；
2. 利用JavaScript代码实现图片的自动轮播功能；
3. 利用JavaScript代码实现轮播区域的左右切换功能。

下面，我们就来一步步实现这些功能。

编写HTML和CSS代码

首先，我们需要在HTML文件中创建轮播区域的基本结构，例如：

<div class="slider">
  <ul class="slider-list">
    <li class="slider-item"><img src="img/1.png"></li>
    <li class="slider-item"><img src="img/2.png"></li>
    <li class="slider-item"><img src="img/3.png"></li>
  </ul>
  <div class="slider-arrow slider-arrow-left">&lt;</div>
  <div class="slider-arrow slider-arrow-right">&gt;</div>
</div>

上面这段代码创建了一个div元素，它包含了一个ul元素和两个div元素。ul元素包含了若干个li元素，每个li元素包含了一个img元素，这些img元素就是轮播的图片。两个div元素分别表示了左右切换按钮。

接下来，我们需要编写CSS样式，实现轮播区域的样式布局：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  width: 2400px;
  height: 400px;
}

.slider-item {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-item img {
  display: block;
  width: 800px;
  height: 400px;
}

.slider-arrow {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #fff;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  top: 50%;
  margin-top: -25px;
  cursor: pointer;
}

.slider-arrow-left {
  left: 0;
}

.slider-arrow-right {
  right: 0;
}

上面这段代码实现了轮播区域的基本样式，轮播区域的宽度为800px，高度为400px。ul元素设置为绝对定位，并设置宽度为2400px，表示三张图片宽度的累加值。li元素浮动后设定行为块容器和480像素的宽高。图片图片在高度和宽度上全部继承来自于和父ul标签的相同样式定义。

左右切换按钮是绝对定位于slider元素，并设置好位置和大小，为方便操作也都称为了圆角正方形。

JavaScript实现轮播功能

下面，我们需要编写JavaScript代码，实现图片的自动轮播功能。

var sliderList = document.querySelector('.slider-list');
var sliderItemWidth = document.querySelector('.slider-item').offsetWidth;
var index = 0;
var timer = null;
var animateDuration = 500;

function moveNext() {
  if (index === 2) {
    index = 0;
  } else {
    index++;
  }
  sliderList.style.transition = animateDuration + 'ms';
  sliderList.style.transform = 'translateX(' + (-index * sliderItemWidth) + 'px)';
}

function startAnimate() {
  timer = setInterval(moveNext, 3000);
}

function stopAnimate() {
  clearInterval(timer);
}
startAnimate();

上面的代码中，我们使用了querySelector获取到了.slider-list和.slider-item元素，同时计算了单个图片元素的宽度。在轮播图的程序中，我们开启了一个自动轮播函数和一个停止轮播的函数。在实现自动轮播的过程中，我们首先实现了切换的程序，并根据具体位置和尺寸计算了CSS的过渡时间和动画效果。

最后，我们使用setInterval函数和moveNext函数实现了自动切换图片的功能，并设置了3秒的切换时间，具体时间和事件间隔可以进行配置。

JavaScript实现左右切换功能

最后，我们还需要编写JavaScript代码，实现轮播区域的左右切换功能。

var sliderArrowLeft = document.querySelector('.slider-arrow-left');
var sliderArrowRight = document.querySelector('.slider-arrow-right');

sliderArrowLeft.addEventListener('click', function() {
  if (index === 0) {
    index = 2;
  } else {
    index--;
  }
  sliderList.style.transition = animateDuration + 'ms';
  sliderList.style.transform = 'translateX(' + (-index * sliderItemWidth) + 'px)';
});

sliderArrowRight.addEventListener('click', function() {
  moveNext();
});

上述代码中，我们首先使用querySelector获取到了左右切换按钮，然后使用addEventListener为按钮添加了click事件，分别实现了向左和向右切换的功能。

示例说明

以上就是实现图片轮播效果的完整攻略了。除了上述基础部分，具体的代码和效果可以过实例来说明：

示例1：https://codepen.io/pen/?editors=1010

示例2：https://codesandbox.io/s/interesting-https-0u8dw?file=/src/index.js

以上两个实例均已实现了自动轮播和左右切换的功能，可以进行参考学习。如果需要更多的细节，欢迎观看与研究。