原生JS实现匀速图片轮播动画

下面我就详细讲解“原生JS实现匀速图片轮播动画”的完整攻略:

一、概述

图片轮播动画是网页设计中常用的效果,它能够增加页面的美感,并且能够呈现多个图片,帮助用户更好的了解网站的内容。本攻略将介绍如何使用原生JS实现匀速图片轮播动画。

二、实现步骤

1. HTML结构

首先,在HTML中需要创建一个容器,用于存储图片和轮播进度条。HTML结构如下:

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <img src="yyy.jpg" alt="">
    ...
  </div>
  <ul class="slider-nav"></ul>
</div>

在上述代码中,slider-container是轮播的容器,slider-list是图片列表容器,slider-nav是轮播进度条容器。需要注意的是,slider-list容器中需要添加多个img元素,这些元素就是需要展示的图片。另外,轮播进度条可以选择使用ulli元素实现。

2. CSS样式

对于轮播容器和列表容器,需要添加如下CSS样式:

.slider-container {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative; /*轮播容器需要设置相对定位*/
}
.slider-list {
  position: absolute; /*图片列表容器需要设置绝对定位*/
  top: 0;
  left: 0;
  width: 6000px; /*图片列表容器需要设置超出可见区域*/
  height: 400px;
}
.slider-list img {
  float: left; /*图片需要设置浮动,以便列表容器能够自适应高度*/
  width: 600px;
  height: 400px;
}

对于轮播进度条容器,需要添加如下CSS样式:

.slider-nav {
  position: absolute; /*轮播进度条容器需要设置绝对定位*/
  bottom: 20px;
  left: 50%;
}
.slider-nav li {
  display: inline-block; /*轮播进度条子项需要设置为行内块元素*/
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #fff;
  border-radius: 50%; /*实现圆形效果*/
  cursor: pointer;
}
.slider-nav li.active {
  background-color: #666; /*设置激活状态下的背景色*/
}

3. JS实现

在JS中,需要通过获取相应的元素,计算图片的宽度和总页数,以及添加轮播进度条的子项等操作。核心逻辑如下:

var $sliderContainer = document.querySelector('.slider-container');
var $sliderList = document.querySelector('.slider-list');
var $sliderImgs = document.querySelectorAll('.slider-list img');
var $sliderNav = document.querySelector('.slider-nav');
var $sliderNavItems = null;

var imgWidth = $sliderImgs[0].offsetWidth;
var pageCount = $sliderImgs.length;
var curIndex = 0;

// 初始化
init();

function init() {
  renderNav(); // 添加轮播进度条子项
  bindEvents(); // 绑定事件
  startTimer(); // 启动自动播放
}

// 添加轮播进度条子项
function renderNav() {
  var navHtml = '';
  for (var i = 0; i < pageCount; i++) {
    navHtml += '<li></li>';
  }
  $sliderNav.innerHTML = navHtml;
  $sliderNavItems = $sliderNav.querySelectorAll('li');
  setActive(0);
}

// 绑定事件
function bindEvents() {
  // 鼠标悬停事件
  $sliderContainer.addEventListener('mouseover', function() {
    stopTimer();
  });
  $sliderContainer.addEventListener('mouseleave', function() {
    startTimer();
  });
  // 轮播进度条子项点击事件
  $sliderNav.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      var index = Array.prototype.indexOf.call($sliderNavItems, e.target);
      setActive(index);
      slideTo(index);
    }
  });
}

// 设置当前轮播进度条项
function setActive(index) {
  for (var i = 0; i < pageCount; i++) {
    if (i === index) {
      $sliderNavItems[i].className = 'active';
    } else {
      $sliderNavItems[i].className = '';
    }
  }
}

// 滑动到指定序号
function slideTo(index) {
  var curLeft = -$sliderList.offsetLeft;
  var targetLeft = imgWidth * index;

  var startTime = new Date().getTime();
  var duration = 500; // 动画时长
  var timer = setInterval(function() {
    var curTime = new Date().getTime() - startTime;
    var percent = curTime / duration;
    if (percent > 1) {
      percent = 1;
    }
    var newLeft = curLeft + (targetLeft - curLeft) * percent;
    $sliderList.style.left = -newLeft + 'px';
    if (percent === 1) {
      clearInterval(timer);
    }
  }, 10);
}

// 启动自动播放
function startTimer() {
  clearInterval(timer);
  timer = setInterval(function() {
    curIndex++;
    if (curIndex >= pageCount) {
      curIndex = 0;
    }
    setActive(curIndex);
    slideTo(curIndex);
  }, 3000);
}

// 停止自动播放
function stopTimer() {
  clearInterval(timer);
}

4. 示例说明

接下来,本攻略将给出两个不同的示例,帮助读者更好地理解和实践上述代码:

示例1

在第一个示例中,假设轮播的图片只有两张,即:

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <img src="yyy.jpg" alt="">
  </div>
  <ul class="slider-nav"></ul>
</div>

此时,只需要将JS中的init()函数中的startTimer()语句注释掉,即可实现静态的轮播效果。具体实现可以参考以下代码:

function init() {
  renderNav();
  bindEvents();
  // startTimer();
}

示例2

在第二个示例中,假设轮播的图片有五张,并且需要添加文字说明,即:

<div class="slider-container">
  <div class="slider-list">
    <img src="xxx.jpg" alt="">
    <div class="slider-item-desc">
      <p>图1说明文字</p>
    </div>
    <img src="yyy.jpg" alt="">
    <div class="slider-item-desc">
      <p>图2说明文字</p>
    </div>
    ...
  </div>
  <ul class="slider-nav"></ul>
</div>

此时,我们需要通过添加CSS样式,来使得图片和文字可以重叠在一起。具体代码如下:

.slider-item-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); /*添加半透明背景色*/
  color: #fff;
}
.slider-item-desc p {
  margin: 0;
  padding: 0;
}

同时,需要在JS中添加以下语句,以便轮播效果照常工作:

var $sliderItemDescs = $sliderList.querySelectorAll('.slider-item-desc');

function setActive(index) {
  for (var i = 0; i < pageCount; i++) {
    if (i === index) {
      $sliderNavItems[i].className = 'active';
      $sliderItemDescs[i].style.display = 'block';
    } else {
      $sliderNavItems[i].className = '';
      $sliderItemDescs[i].style.display = 'none';
    }
  }
}

三、总结

通过以上步骤,我们成功实现了匀速图片轮播动画。需要注意的是,本攻略中所提到的代码和示例只能用于参考,如果想要实现更多的效果,还需要根据实际情况进行修改和拓展。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现匀速图片轮播动画 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js数组常见操作及数组与字符串相互转化实例详解

    JavaScript数组常见操作 创建数组 使用字面量方式创建数组: let arr = [1, 2, 3, 4, 5]; 使用构造函数方式创建数组: let arr = new Array(1, 2, 3, 4, 5); 访问数组元素 let arr = [1, 2, 3, 4, 5]; console.log(arr[0]) // 输出 1 修改数组元素…

    JavaScript 2023年5月27日
    00
  • JavaScript简单生成 N~M 之间随机数的方法

    Javascript 中生成随机数主要依赖于Math对象的两个方法:Math.random()和Math.floor()。 一、使用方法 Math.random()方法可以生成0到1的随机数,包含0但不包含1。 Math.floor()方法将小数向下取整,例如Math.floor(3.9)为3。 利用这两个方法,我们可以生成一个指定范围内的随机数: Math…

    JavaScript 2023年5月28日
    00
  • JavaScript 过滤关键字

    下面是关于“JavaScript 过滤关键字”的完整攻略。 什么是JavaScript过滤关键字? JavaScript过滤关键字是指通过编程技术对指定的文本进行匹配,过滤掉所包含的不允许出现的关键字,通常用于过滤用户提交的数据,防止网站受到攻击或者输入非法数据。 如何实现JavaScript过滤关键字? 1.使用JavaScript的字符串方法 JavaS…

    JavaScript 2023年5月28日
    00
  • Javascript基础知识(二)事件

    Javascript基础知识(二)事件 一、事件的定义和使用 事件是指在操作网页时所产生的一系列动作,例如鼠标点击、键盘输入、窗口滚动等等。通过事件,我们可以给网页绑定相应的响应函数,实现网页的交互功能。 在Javascript中,事件通常被定义为对象的一种,可以使用addEventListener()方法来绑定事件函数。示例代码如下: document.g…

    JavaScript 2023年6月10日
    00
  • 如何判断元素是否为HTMLElement元素

    如果要判断一个元素是否为 HTMLElement 元素,我们可以使用 JavaScript 自带的 instanceof 方法。 示例 1:使用 instanceof 方法判断元素是否为 HTMLElement 元素 // 获取 HTML 元素 const el = document.querySelector(‘div’); // 判断元素是否为 HTML…

    JavaScript 2023年6月10日
    00
  • javascript中instanceof运算符的用法详解

    JavaScript中instanceof运算符的用法详解 instanceof是JavaScript中的一个运算符,用于检测指定对象是否为某个构造函数的实例。其语法为: object instanceof constructor 其中,object是要检测的对象,constructor是要检测的构造函数。 检测对象是否为某个特定类型的实例 我们可以通过in…

    JavaScript 2023年6月11日
    00
  • javascript Function函数理解与实战

    JavaScript Function 函数理解与实战 1. 概述 函数是 JavaScript 中的重要概念之一。它是一块代码,用于完成特定的任务。函数通常有一个名称,可以提高代码的重用率,使代码更易于维护。在 JavaScript 中,函数也是第一类对象,也就是说,它们可以作为参数传递,返回值以及保存到变量中。 2. 基本语法 2.1 函数声明 函数通常…

    JavaScript 2023年5月27日
    00
  • JSONP解决JS跨域问题的实现

    让我们来详细讲解一下如何使用JSONP来解决JS跨域问题。 什么是JSONP JSONP是一种跨域方式,全称为JSON with Padding。它通过动态创建script标签的方式,将请求的数据包装在函数中返回,并执行这个函数,从而实现跨域请求数据的目的。 JSONP的原理很简单,就是利用script标签的src属性可以跨域请求资源,而服务端返回的是一个具…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部