原生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日

相关文章

  • 解析PHP 使用curl提交json格式数据

    解析PHP使用curl提交json格式数据 什么是curl? curl是一个可用于传输数据的工具,支持多种协议,例如HTTP、FTP、SMTP等。在PHP中,我们可以使用curl向远程服务器发送HTTP请求,并获取对方的响应数据。 使用curl提交json格式数据 步骤一: 设置请求头 在使用curl向远程服务器发送请求时,我们需要设置请求头。在提交json…

    JavaScript 2023年6月11日
    00
  • javascript字符串函数汇总

    JavaScript字符串函数汇总 本攻略为您详细介绍了 JavaScript 中常用的字符串函数,包括基本字符串方法、正则表达式方法、以及 ES6 中新增的字符串方法。通过掌握本文的内容,您将能够更加熟练地操作字符串。 基本字符串方法 1. length 属性 JavaScript 中的字符串都有一个 length 属性,表示该字符串的长度。示例如下: v…

    JavaScript 2023年5月18日
    00
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试JavaScript是Web开发中的重要环节,它可以帮助我们追踪和解决代码错误,提高开发效率和代码质量。下面我将分别介绍使用浏览器F12和VS中的debugger关键字进行JavaScript调试的方法和示例。 使用浏览器F12调试JavaScript代码 打开网页并打开开发者工具:F12或者右键选择“检查”; 在Sources(源码)选项卡中找到要调试…

    JavaScript 2023年6月11日
    00
  • Ajax基础知识详解

    Ajax基础知识详解 什么是Ajax Ajax全称为 Asynchronous JavaScript And XML,即异步的JavaScipt和XML。Ajax可以通过JavaScript在不刷新页面的情况下向服务器发送数据请求,并能够通过JavaScript在不刷新页面的情况下更新页面。 Ajax的优点 用户能够更快地获取数据并更新页面,提升用户体验度。…

    JavaScript 2023年6月11日
    00
  • javascript jQuery $.post $.ajax用法

    下面是关于JavaScript jQuery中$.post和$.ajax用法的详细攻略。 什么是 jQuery? jQuery 是 Javascript 中的一种框架,可以方便地操作 HTML 文档、处理事件、制作动画方法等。jQuery 中提供了很多常用的函数和方法,使用它可以更加高效、简洁地编写Javascript代码。 jQuery 的 $.post …

    JavaScript 2023年5月27日
    00
  • JavaScript也谈内存优化

    JavaScript也谈内存优化 为什么要进行内存优化? JavaScript代码执行时会占用计算机的内存空间,当JavaScript代码执行完毕后,内存空间会被释放。但如果我们的代码存在内存泄漏等问题,那么内存空间就不会被释放,直到浏览器或者计算机崩溃。 而进行内存优化,则可以有效减少内存泄漏等问题的出现,让我们的代码更健壮、更高效地执行。 如何进行内存优…

    JavaScript 2023年5月28日
    00
  • 前端常见的安全问题以及防范措施总结大全

    前端常见的安全问题主要有以下几个方面: XSS攻击(跨站脚本攻击):攻击者将恶意代码注入到网页中,当用户浏览网页时,恶意代码将被执行,获取用户的敏感信息或在用户机器上执行恶意操作。防范措施:输入检查和转义、CSP(Content Security Policy)、对cookie设置HttpOnly属性、使用安全的代码库和框架。 CSRF攻击(跨站请求伪造攻击…

    JavaScript 2023年6月10日
    00
  • JS面向对象之多选框实现

    JS面向对象之多选框实现是一个比较基础的JavaScript面向对象应用,它的实现过程也相对简单,下面我将为大家详细讲解其完整攻略。 一、需求分析 在实现之前,我们需要先进行需求分析。在本次多选框实现中,我们需要完成以下几个基本功能: 点击某个多选框实现选中或取消选中该选项的功能; 点击“全选”按钮,所有多选框均被选中; 点击“取消全选”按钮,所有多选框均被…

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