js制作轮播图效果

下面是详细讲解“js制作轮播图效果”的完整攻略:

1. 确定需求

首先确定需求,也就是轮播图的要求。比如需要自动播放、可以手动切换、需要圆点分页器等等。根据不同的需求,我们会采用不同的实现方法。

在这里,我们暂定轮播图的基本要求为:自动播放、手动切换、圆点分页器。

2. HTML结构

根据需求,确定好HTML结构的基本框架,比如轮播图盒子、轮播图图片、圆点分页器等等。在本例中,HTML结构如下:

<div id="slider">
  <ul class="slider-img">
    <li><img src="img/1.jpg" alt="轮播图1"></li>
    <li><img src="img/2.jpg" alt="轮播图2"></li>
    <li><img src="img/3.jpg" alt="轮播图3"></li>
    <li><img src="img/4.jpg" alt="轮播图4"></li>
  </ul>
  <ul class="slider-nav">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

其中,slider为轮播图盒子,slider-img为轮播图图片列表,slider-nav为圆点分页器,active为当前选中的圆点。

3. CSS样式

编写CSS样式,使轮播图可以正常显示。在本例中,CSS样式如下:

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

.slider-img {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 2400px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-img li {
  float: left;
  width: 600px;
  height: 400px;
}

.slider-img li img {
  width: 100%;
  height: 100%;
}

.slider-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-nav li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999;
  margin-right: 10px;
  float: left;
  cursor: pointer;
}

.slider-nav li.active {
  background-color: #ff6600;
}

4. JavaScript实现

4.1 自动播放

思路:定义一个变量index用于记录当前显示的图片索引,定义一个函数showNext用于切换下一张图片,定义一个定时器timer,每隔一定的时间执行showNext()

实现代码:

var index = 0;
var timer = null;

function showNext() {
  index++;
  if (index >= 4) {
    index = 0;
  }
  var imgList = document.querySelectorAll(".slider-img li");
  var navList = document.querySelectorAll(".slider-nav li");
  for (var i = 0; i < imgList.length; i++) {
    imgList[i].style.display = "none";
    navList[i].classList.remove("active");
  }
  imgList[index].style.display = "block";
  navList[index].classList.add("active");
}

timer = setInterval(showNext, 2000);

4.2 手动切换

思路:给圆点分页器绑定click事件,在事件中获取当前圆点的索引,然后将index设置为当前索引,调用showNext()函数。

实现代码:

var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
  navList[i].addEventListener("click", function() {
    var index = Array.prototype.indexOf.call(navList, this);
    var imgList = document.querySelectorAll(".slider-img li");
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.display = "none";
      navList[i].classList.remove("active");
    }
    imgList[index].style.display = "block";
    navList[index].classList.add("active");
  });
}

5. 完整代码及示例

HTML代码:

<div id="slider">
  <ul class="slider-img">
    <li><img src="img/1.jpg" alt="轮播图1"></li>
    <li><img src="img/2.jpg" alt="轮播图2"></li>
    <li><img src="img/3.jpg" alt="轮播图3"></li>
    <li><img src="img/4.jpg" alt="轮播图4"></li>
  </ul>
  <ul class="slider-nav">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS代码:

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

.slider-img {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 2400px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-img li {
  float: left;
  width: 600px;
  height: 400px;
}

.slider-img li img {
  width: 100%;
  height: 100%;
}

.slider-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-nav li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999;
  margin-right: 10px;
  float: left;
  cursor: pointer;
}

.slider-nav li.active {
  background-color: #ff6600;
}

JavaScript代码:

var index = 0;
var timer = null;

function showNext() {
  index++;
  if (index >= 4) {
    index = 0;
  }
  var imgList = document.querySelectorAll(".slider-img li");
  var navList = document.querySelectorAll(".slider-nav li");
  for (var i = 0; i < imgList.length; i++) {
    imgList[i].style.display = "none";
    navList[i].classList.remove("active");
  }
  imgList[index].style.display = "block";
  navList[index].classList.add("active");
}

timer = setInterval(showNext, 2000);

var navList = document.querySelectorAll(".slider-nav li");
for (var i = 0; i < navList.length; i++) {
  navList[i].addEventListener("click", function() {
    var index = Array.prototype.indexOf.call(navList, this);
    var imgList = document.querySelectorAll(".slider-img li");
    for (var i = 0; i < imgList.length; i++) {
      imgList[i].style.display = "none";
      navList[i].classList.remove("active");
    }
    imgList[index].style.display = "block";
    navList[index].classList.add("active");
  });
}

实例1:点击查看

实例2:点击查看

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

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

相关文章

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程 前言 微信小程序是一种全新的应用形态,可以在微信中打开,使用前端技术进行开发。相比传统APP而言,微信小程序不需要安装,用户可以直接通过微信扫描二维码或者搜索来使用。本文将从基础入门开始,介绍微信小程序的开发过程。 准备工作 在开始微信小程序开发之前,需要准备好以下环境:1. 微信开发者工具,可以在这里下载。2. 微信公众平台账号…

    JavaScript 2023年5月27日
    00
  • JavaScript实现串行请求的示例代码

    下面我将详细讲解如何使用JavaScript实现串行请求的示例代码。 什么是串行请求 串行请求是指在请求数据时,将多个请求依次执行,等待上一个请求完成后再执行下一个请求。这一方式可以确保数据的有序获取,适用于一些需要按照顺序加载的数据。 实现方法 实现串行请求的方法有很多,这里我们介绍一种使用Promise的方法。 通过将请求封装在Promise函数中,可以…

    JavaScript 2023年6月11日
    00
  • JavaScript Boolean 对象

    以下是关于JavaScript Boolean对象的完整攻略。 JavaScript Boolean对象 JavaScript Boolean对象是一个包装了布尔值的对象。该对象有两个值:true和false。在JavaScript中,布尔值通常用于条件语句和逻辑运算符中。 下面是一个使用Boolean对象的示例: var bool = new Boolea…

    JavaScript 2023年5月11日
    00
  • Vue.js每天必学之数据双向绑定

    Vue.js每天必学之数据双向绑定攻略 什么是数据双向绑定 数据双向绑定是指当数据发生变化时,页面元素会自动更新来保持一致,同时当用户操作页面元素发生变化时,与之绑定的数据也会自动更新。 为什么需要数据双向绑定 数据双向绑定可以帮助我们更加方便地处理页面元素和数据之间的关系,简化了开发过程并提高了开发效率。 如何实现数据双向绑定 Vue.js提供了v-mod…

    JavaScript 2023年6月11日
    00
  • JS实现判断两个日期不能跨年和跨月

    要判断两个日期是否跨年或者跨月,需要将日期转换为时间戳(以毫秒为单位),然后进行比较。 以下是实现判断两个日期是否跨年或者跨月的完整攻略: 步骤一:将日期转换为时间戳 首先需要将需要比较的两个日期都转换为时间戳,可以使用Date对象的getTime()方法来实现。 let date1 = new Date(‘2022-10-01’); let date2 =…

    JavaScript 2023年6月10日
    00
  • js日历控件(可精确到分钟)

    首先介绍一下JS日历控件的基础要素: HTML结构 <input type="text" id="input-time" name="time" placeholder="选择时间" readonly> CSS样式 这里我们采用了Bootstrap的样式,如果你没有引…

    JavaScript 2023年5月27日
    00
  • javascript实现一个网页加载进度loading

    下面是关于Javascript实现一个网页加载进度loading的完整攻略。 步骤一:添加HTML结构 首先,在网页的HTML结构中添加loading元素,用于显示进度条和加载状态。可以采用下面代码模板: <div id="loading"> <div id="progress"></di…

    JavaScript 2023年6月11日
    00
  • 简单谈谈JS数组中的indexOf方法

    关于“简单谈谈JS数组中的indexOf方法”的攻略,我会详细讲解如下。 什么是 indexOf 方法 在 JavaScript 中,数组是一种常用的数据结构,它提供了许多方法来操作数组。其中一个非常有用的方法是 indexOf。这个方法可以用来查找数组中某个元素的位置。 如何使用 indexOf 方法 语法 arr.indexOf(searchElemen…

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