js实现滑动轮播效果

当我们需要在网站中展示多个幻灯片图片时,掌握JavaScript实现滑动轮播效果非常重要。以下是实现此效果的完整攻略:

步骤一: HTML结构

在HTML中创建一个轮播区域,它包含一个有序列表,以及向前和向后按钮。

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slide"> <img src="img1.jpg" /> </li>
    <li class="slide"> <img src="img2.jpg" /> </li>
    <li class="slide"> <img src="img3.jpg" /> </li>
    <li class="slide"> <img src="img4.jpg" /> </li>
  </ul>
  <a href="#" class="slider-prev">Prev</a>
  <a href="#" class="slider-next">Next</a>
</div>

步骤二: CSS

接下来,添加CSS样式,以便在页面中呈现轮播效果。首先,将幻灯片中的每个列表项横向对齐。然后,使用绝对定位将每个幻灯片对齐到轮播器。最后,隐藏幻灯片中的滚动条,以确保幻灯片填充整个容器。

.slider {
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  position: relative;
  width: 300%;
  margin: 0;
  padding: 0;
  left: 0;
  list-style: none;
  transition: left 0.5s;
}

.slide {
  float: left;
  width: 33.3333%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}

a.slider-prev, a.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  z-index: 1;
}

a.slider-prev {
  left: 0;
}

a.slider-next {
  right: 0;
}

::-webkit-scrollbar {
  display: none;
}

步骤三: JavaScript

现在,需要添加JavaScript代码以实现轮播效果。首先,为按钮添加单击事件侦听器,并在单击事件触发时使用CSS属性left轮流滑动轮播器。定时器将幻灯片向右或向左移动,具体取决于是单击“下一页”按钮还是“上一页”按钮。

const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderPrev = document.querySelector('.slider-prev');
const sliderNext = document.querySelector('.slider-next');
let slideWidth = document.querySelector('.slide').offsetWidth;
let slideIndex = 0;

sliderPrev.addEventListener('click', function(e){
  e.preventDefault();

  slideIndex = slideIndex > 0 ? slideIndex - 1 : 0;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
});

sliderNext.addEventListener('click', function(e){
  e.preventDefault();

  slideIndex = slideIndex < 3 ? slideIndex + 1 : 3;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
});

setInterval(function(){
  slideIndex = slideIndex < 3 ? slideIndex + 1 : 0;
  sliderWrapper.style.left = slideIndex * (-slideWidth) + 'px';
}, 3000);

示例说明

示例一: 每隔一定时间自动轮播

上述JavaScript代码中,使用setInterval()方法在每隔3秒轮流滑动幻灯片并实现自动轮播效果。

示例二: 实现无限滑动

上述JavaScript代码中,通过判断当前滑动幻灯片的位置,从而实现循环滑动的效果。例如,当到达最后一张图片后,再向右单击“下一页”按钮时,将把幻灯片列表位置的CSS属性设置为0,从而实现无限滑动。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现滑动轮播效果 - Python技术站

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

相关文章

  • 深入浅析var,let,const的异同点

    深入浅析var,let,const的异同点 在JavaScript中,我们可以使用var,let和const关键字来声明变量。这些关键字在声明变量时有着不同的作用和用法。 var 在早期的JavaScript版本中,我们只能使用var来声明变量。使用var时,变量作用域为整个函数(函数作用域)。在函数内部声明的变量在函数外部也可以被访问到。如果在函数内部声明…

    JavaScript 2023年6月11日
    00
  • JS几个常用的函数和对象定义与用法示例

    JS常用的函数和对象非常多,以下是其中几个常用的函数和对象的定义及用法示例: 函数 1. parseInt() parseInt() 函数将一个字符串解析成整数,或者说提取数字部分,并返回整数。如果不能转换,则返回NaN。 注意:如果字符串以0x或0X前缀开头, parseInt() 函数会把数字识别为16进制数字。 语法: parseInt(string,…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript面向对象实战之封装拖拽对象

    《详解JavaScript面向对象实战之封装拖拽对象》是一篇关于JavaScript面向对象编程的实战性文章,主要讲解通过封装实现拖拽对象的过程。下面是该文的完整攻略: 标题 该文章的标题为:详解JavaScript面向对象实战之封装拖拽对象。 正文 介绍 文章首先对面向对象编程进行了简要介绍,包括面向对象编程的基本思想、面向对象编程的优点等。然后,文章介绍…

    JavaScript 2023年5月27日
    00
  • chrome浏览器如何断点调试异步加载的JS

    要断点调试异步加载的JS,需要使用Chrome浏览器的开发者工具。下面是详细的步骤: 打开网页,按F12调出开发者工具。 在开发者工具中,点击Sources(或快捷键Ctrl + Shift + S)。 在Sources面板里,选择要调试的JS文件并打开。 在JS文件中找到要调试的代码行,点击行号可以在该行设置断点。 在代码中使用debugger语句,同样可…

    JavaScript 2023年6月11日
    00
  • 原生JS实现文件上传

    下面是“原生JS实现文件上传”的详细攻略: 1. HTML结构 在HTML文件中添加一个表单,包含一个文件输入和一个提交按钮。 <form enctype="multipart/form-data"> <input type="file" name="fileInput" id=&…

    JavaScript 2023年5月27日
    00
  • ES2015 正则表达式新增特性

    ES2015 正则表达式新增特性是指 ECMAScript 2015 标准中新增了一些正则表达式相关的语法和特性。在这里我将为您详细讲解这些新增特性,以及它们的使用示例,以便您更好地掌握正则表达式的应用。 1. 新增的 y 修饰符 ES2015 引入了 y 修饰符,旨在实现粘性匹配。它与 g 修饰符的作用类似,但是 y 修饰符只能在匹配的字符串开头执行匹配,…

    JavaScript 2023年6月10日
    00
  • JavaScript判断表单中多选框checkbox选中个数的方法

    当我们需要检查表单中多选框checkbox的选中个数时,我们可以使用JavaScript编写代码来完成此任务。以下是一些检查多选框选中个数的方法: 方法一:使用原生JavaScript 获取多选框节点列表 我们需要先通过document.getElementsByName()方法获取包含多选框元素的节点列表。以下代码展示了如何获取名称为“items”的多选框…

    JavaScript 2023年6月10日
    00
  • 详解addEventListener的三个参数之useCapture

    addEventListener是DOM元素对象常用的事件绑定方法,其常用的用法如下: element.addEventListener(event, function [, options]); 其中,第三个参数options可以是一个布尔值,也可以是一个对象。当其是一个布尔值时,表示useCapture,即事件是否在捕获阶段(capturing phas…

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