1. Python技术站首页
  2. css

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

• css
yizhihongxing

下面是完整的攻略：

前置知识

在阅读本攻略前，你需要掌握基本的 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)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js动态删除div元素基本思路及实现代码

    下面我将详细讲解“js动态删除div元素基本思路及实现代码”的完整攻略。 基本思路 动态删除div元素需要通过JavaScript来实现。基本思路如下： 定位到需要删除的div元素； 调用父元素的removeChild()方法，将该div元素从文档树中移除。 实现代码 下面是实现动态删除div元素的JavaScript代码示例： // 定位到需要删除的div…

    css 2023年6月10日
    00

  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表

    详解CSS3.0(Cascading Style Sheet) 层叠级联样式表 CSS3.0 是一种层叠样式表语言，用来描述 HTML 和 XML（包括各自的语言规范）这类文档的表现。它为HTML文档提供了控制页面样式的方式，使得文档作者和用户能够将样式信息与文档内容分离，提高了文档的可维护性和可重用性。 选择器 选择器指定了一个或多个元素应用样式规则。CS…

    css 2023年6月9日
    00

  • CSS规范BEM CSS和OOCSS的示例代码详解

    CSS规范BEM CSS和OOCSS的示例代码详解 引言 在日常前端工作中，CSS规范的重要性不言自明。 CSS标准的定义和规范比较宽泛，因此前端工程师们经常会遇到样式混乱、代码重复、可维护性差，难以改造等问题。为了解决这些问题，我们需要编写遵循统一规范的CSS代码，其中BEM CSS和OOCSS是目前流行的两种规范方式。本篇文章主要讲解BEM CSS和OO…

    css 2023年6月10日
    00

  • DIV随滚动条滚动而滚动的实现代码【推荐】

    这里给您详细讲解一下DIV随滚动条滚动而滚动的实现代码的完整攻略。 1. 安装jQuery插件 实现DIV随滚动条滚动而滚动，需要使用jQuery插件。如果您还没有安装jQuery插件，请先进行安装。 在HTML文件中插入jQuery插件的链接： <script src="https://cdn.bootcss.com/jquery/3.4.…

    css 2023年6月10日
    00

  • JS+CSS3制作炫酷的弹窗效果

    下面我将详细讲解“JS+CSS3制作炫酷的弹窗效果”的完整攻略。 1. 弹窗效果的实现思路 要实现弹窗效果，我们需要完成以下几个步骤： 创建一个弹窗，并设置其基本样式； 利用JavaScript控制弹窗的显示和隐藏； 利用CSS3动画效果（如transition和animation）来为弹窗添加过渡效果。 接下来，我将一步步详细讲解如何实现弹窗效果。 2. …

    css 2023年6月10日
    00

  • PJBLOG使用技巧

    PJBLOG使用技巧攻略 PJBLOG是一款常见的开源博客系统，它可以帮助博主快速搭建自己的博客网站。在本文中，我们将提供一些PJBLOG的使用技巧，以满足用户较为个性化的需求。 1. 自定义主题 PJBLOG有五种默认主题供用户选择，如果您想让您的博客网站更加个性化，可以自定义主题。下面是一个示例： // 在PJBLOG根目录下的config.yaml文件…

    css 2023年6月10日
    00

  • 移动端页面优化该怎么做？ 从四个方面帮你做好移动页面性能优化

    移动端页面优化是当前互联网开发中非常重要的一环。在移动设备市场日益发展的今天，越来越多的用户通过移动设备访问网页，因此对于网页的性能优化要求也越来越高。接下来从四个方面为大家介绍一下移动端页面优化的攻略。 第一步：优化页面资源 通过压缩图片、css和JavaScript文件来优化页面资源。这样可以减少页面的加载时间，提高用户体验。以下是两条示例说明： 对于图…

    css 2023年6月11日
    00

  • 10分钟入门CSS3 Animation

    下面是针对“10分钟入门CSS3 Animation”的完整攻略： CSS3 Animation是什么 CSS3 Animation是CSS3中的一个模块，其主要作用是创建动态效果，使网页更加生动、活泼。通过CSS3 Animation，可以实现各种复杂的动画效果，如旋转、放大、缩小、褪色等。 CSS3 Animation的语法 CSS3 Animation…

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