原生javascript实现图片轮播效果代码

下面是完整的攻略:

前置知识

在阅读本攻略前,你需要掌握基本的 HTML 和 CSS 技能,还要熟练掌握 JavaScript 中的 DOM 操作,了解一些简单的 jQuery 使用方法。

实现步骤

第一步:HTML 结构

首先,在页面中准备好需要轮播的图片和圆点标识的 HTML 结构,并设置好对应的 CSS 样式。

以下是一个简单的示例:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="images/1.jpg" alt="Slide 1" />
    <img src="images/2.jpg" alt="Slide 2" />
    <img src="images/3.jpg" alt="Slide 3" />
  </div>
  <div class="slider-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
.slider-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

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

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  display: inline-block;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.active {
  background-color: #f00;
}

第二步:JavaScript 实现轮播

接下来,使用原生 JavaScript 实现轮播效果。以下是基本思路:

  1. 获取需要的 DOM 元素。
  2. 定义一个变量 slideIndex 来记录当前轮播的图片索引。
  3. 定义一个定时器,每隔一定时间自动轮播。
  4. 实现点击圆点标识来切换轮播的图片。
  5. 判断当前是否是最后一张图片,如果是则返回第一张图片。

最终的 JavaScript 代码如下:

// 获取元素
const container = document.querySelector('.slider-container');
const wrapper = document.querySelector('.slider-wrapper');
const dots = document.querySelectorAll('.dot');

// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;

// 自动轮播
setInterval(() => {
  slideIndex++;
  if (slideIndex > dots.length) {
    slideIndex = 1;
  }
  moveSlides();
}, 3000);

// 圆点标识点击事件
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    slideIndex = index + 1;
    moveSlides();
  });
});

// 移动轮播图
function moveSlides() {
  wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
  dots.forEach((dot) => {
    dot.classList.remove('active');
  });
  dots[slideIndex - 1].classList.add('active');
}

第三步:实现动态添加轮播图片

最后,我们还可以实现动态添加轮播图片的功能。以下是步骤:

  1. 定义一个数组存储图片路径。
  2. 使用 createElement 方法动态创建图片元素,并使用 appendChild 方法添加到轮播图片容器中。
  3. 更新轮播图片的数量和圆点标识数量。
  4. 更新圆点标识的点击事件。

以下是示例代码:

// 图片路径
const slides = [
  'images/1.jpg',
  'images/2.jpg',
  'images/3.jpg',
  'images/4.jpg',
  'images/5.jpg',
];

// 动态添加图片
slides.forEach((slide) => {
  const img = document.createElement('img');
  img.src = slide;
  img.alt = 'Slide';
  wrapper.appendChild(img);
});

// 更新变量和圆点标识数量
const dotsContainer = document.querySelector('.slider-dots');
const dotsHTML = [...dotsContainer.innerHTML];
for (let i = 0; i < slides.length; i++) {
  const dot = document.createElement('span');
  dot.classList.add('dot');
  dotsContainer.appendChild(dot);
}

// 更新事件
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    slideIndex = index + 1;
    moveSlides();
  });
});

至此,就完成了原生 JavaScript 实现图片轮播效果代码的攻略。

示例说明

示例一: 实现轮播缩略图

以下是一个有轮播缩略图的完整代码示例:

<div class="slider-container">
  <div class="slider-main">
    <div class="slider-wrapper">
      <img src="images/1.jpg" alt="Slide 1" />
      <img src="images/2.jpg" alt="Slide 2" />
      <img src="images/3.jpg" alt="Slide 3" />
      <img src="images/4.jpg" alt="Slide 4" />
      <img src="images/5.jpg" alt="Slide 5" />
    </div>
    <div class="slider-nav">
      <div class="nav-wrapper">
        <div class="nav-item">
          <img src="images/1.jpg" alt="Slide 1" />
        </div>
        <div class="nav-item">
          <img src="images/2.jpg" alt="Slide 2" />
        </div>
        <div class="nav-item">
          <img src="images/3.jpg" alt="Slide 3" />
        </div>
        <div class="nav-item">
          <img src="images/4.jpg" alt="Slide 4" />
        </div>
        <div class="nav-item">
          <img src="images/5.jpg" alt="Slide 5" />
        </div>
      </div>
    </div>
  </div>
</div>
.slider-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slider-main {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-wrapper {
  display: flex;
  width: 500%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

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

.slider-nav {
  position: absolute;
  bottom: 10%;
  width: 100%;
}

.nav-wrapper {
  display: flex;
}

.nav-item {
  margin-right: 10px;
  cursor: pointer;
}

.nav-item img {
  width: 50px;
  height: 50px;
}

.active {
  border: 2px solid #f00;
}
// 获取元素
const container = document.querySelector('.slider-container');
const main = document.querySelector('.slider-main');
const wrapper = document.querySelector('.slider-wrapper');
const navItems = document.querySelectorAll('.nav-item');

// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;

// 自动轮播
setInterval(() => {
  slideIndex++;
  if (slideIndex > navItems.length) {
    slideIndex = 1;
  }
  moveSlides();
}, 3000);

// 缩略图点击事件
navItems.forEach((navItem, index) => {
  navItem.addEventListener('click', () => {
    slideIndex = index + 1;
    moveSlides();
  });
});

// 移动轮播图
function moveSlides() {
  wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
  navItems.forEach((navItem) => {
    navItem.classList.remove('active');
  });
  navItems[slideIndex - 1].classList.add('active');
}

示例二: 实现响应式图片轮播

以下是一个响应式图片轮播的完整代码示例:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="images/1.jpg" alt="Slide 1" />
    <img src="images/2.jpg" alt="Slide 2" />
    <img src="images/3.jpg" alt="Slide 3" />
    <img src="images/4.jpg" alt="Slide 4" />
    <img src="images/5.jpg" alt="Slide 5" />
  </div>
  <div class="slider-buttons">
    <button class="slider-prev">Prev</button>
    <button class="slider-next">Next</button>
  </div>
</div>
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  width: 500%;
  height: 100%;
  position: absolute;
  transition: transform 0.5s ease-in-out;
}

.slider-wrapper img {
  width: calc(100% / 5);
  height: 100%;
  object-fit: cover;
}

.slider-buttons {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.slider-prev,
.slider-next {
  padding: 10px;
  background-color: #f00;
  color: #fff;
  border: none;
  cursor: pointer;
}

.slider-prev {
  margin-right: 10px;
}
// 获取元素
const container = document.querySelector('.slider-container');
const wrapper = document.querySelector('.slider-wrapper');
const prev = document.querySelector('.slider-prev');
const next = document.querySelector('.slider-next');

// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;

// 自动轮播
setInterval(() => {
  slideIndex++;
  if (slideIndex > wrapper.children.length) {
    slideIndex = 1;
  }
  moveSlides();
}, 3000);

// 点击事件
prev.addEventListener('click', () => {
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = wrapper.children.length;
  }
  moveSlides();
});

next.addEventListener('click', () => {
  slideIndex++;
  if (slideIndex > wrapper.children.length) {
    slideIndex = 1;
  }
  moveSlides();
});

// 移动轮播图
function moveSlides() {
  wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
}

以上两个示例分别实现了轮播缩略图和响应式图片轮播,希望对你有帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生javascript实现图片轮播效果代码 - Python技术站

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

相关文章

  • CSS haslayout 彻底了解

    CSS haslayout 彻底了解 haslayout 是一个针对IE浏览器的一个布局属性,用于处理IE6和IE7浏览器在渲染元素时的一些问题,包括了一些布局的特性以及规则。 haslayout属性的作用 在讲解haslayout属性的具体含义之前,我们先来了解一下haslayout属性的作用: 解决IE6下的双倍margin问题。 解决IE6和IE7下的…

    css 2023年6月10日
    00
  • Dreamweaver中的AP元素怎么修改宽度高度和颜色?

    如果想要修改Dreamweaver中AP元素(绝对定位元素)的宽度、高度和颜色,可以按照下面的步骤进行: 选中需要修改的AP元素 在Dreamweaver中选中想要修改的AP元素,可以使用鼠标单击或者直接通过标签选择器来选中。 打开属性面板 打开Dreamweaver的属性面板,可以使用菜单栏的“窗口”>“属性”来打开。当选中AP元素后,属性面板中会显…

    css 2023年6月9日
    00
  • 详解CSS-opacity子元素继承父元素透明度的解决方法

    下面是详解 “CSS-opacity子元素继承父元素透明度的解决方法” 的攻略。 什么是 CSS-opacity? 在 CSS 中,opacity 属性指定元素的透明度,即元素的不透明度程度。该属性的值介于 0(完全透明) 和 1(完全不透明)之间。例如,设置一个元素的 opacity 为 0.5,那么这个元素会半透明显示。 想象一个问题 当一个元素设置了 …

    css 2023年6月10日
    00
  • JS+CSS实现滑动切换tab菜单效果

    JS+CSS实现滑动切换tab菜单效果的攻略: 前端HTML结构设计: 首先在HTML页面中,需要定义一个具有一定宽度的容器,用于承载tab菜单和对应的内容项。在该容器中,使用无序列表添加tab菜单项,并在li内添加标签页的名称等内容。同时,在该容器中添加对应的内容项,使用具有相同class的div元素作为内容项的容器,并在其内添加对应的标签页内容。具体的H…

    css 2023年6月10日
    00
  • css 背景透明 元素(标签)背景透明的css设计

    接下来我将为您详细讲解“CSS背景透明元素背景透明的设计”。 1. CSS背景透明 CSS中背景透明效果可以通过设置元素的”opacity”属性实现,其值的范围是0-1之间(0表示完全透明,1表示不透明)。设置元素的opacity属性,会使该元素及其内部的所有子元素都变为透明状态。例如,设置如下CSS样式,可以使页面中所有的p标签文字变为半透明状态。 p {…

    css 2023年6月9日
    00
  • javaScript+turn.js实现图书翻页效果实例代码

    JavaScipt + turn.js 实现图书翻页效果实例 介绍 在网站开发中,我们经常需要将一些电子书或者pdf格式的文档转化为网页形式,同时保留原有的阅读体验,这时候实现图书翻页效果就显得尤为重要。 turn.js 是一个基于 JQuery 的图书翻页插件,通过 turn.js 插件,我们可以方便快捷地实现 Web 端的图书翻页效果。 本文将讲解 tu…

    css 2023年6月9日
    00
  • 元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法

    下面我来详细讲解“元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法”的完整攻略。 问题描述 在网页开发过程中,有可能会遇到一个问题,就是元素绝对定位以后设置了高宽,但其中的a标签不能被点击,这个问题是怎么产生的呢? 问题分析 首先,我们需要了解为什么元素的绝对定位和高宽设置会导致a标签不能被点击。 在HTML中,元素的定位方式分为相对定位和绝对定位…

    css 2023年6月9日
    00
  • 浅谈css position absolute相对于父元素的设置方式

    我来为你详细讲解关于CSS中position:absolute相对于父元素的设置方式的攻略。 什么是position:absolute? position:absolute是CSS中的一个定位属性,表示该元素的位置是相对于最近的已定位的父元素。如果没有已定位的父元素,则相对于html元素进行定位。absolute文档流中脱离,不占据原有的位置,可以随意的设置…

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