js仿小米官网图片轮播特效

下面是JS仿小米官网图片轮播特效的完整攻略。

1. 实现思路

轮播图可以利用 JavaScript 配合 CSS 动画来方式实现。我们可以利用 JavaScript 的定时器 setInterval 来不断地改变图片的位置,同时利用 CSS 的动画为图片添加渐变效果。

具体实现步骤如下:

  • 在 HTML 中添加轮播图的容器,包含各个图片和指示器。
  • 在 CSS 中为轮播图容器和图片添加样式,包括指定容器的宽高、定位方式等,以及实现图片的渐变效果。
  • 在 JavaScript 中获取轮播图容器和图片元素,计算每张图片的宽度、总数量等,然后使用 setInterval 实现轮播逻辑。
  • 为轮播图容器添加鼠标移入移出监听事件,当鼠标移入容器时停止轮播,移出时重新开始。

2. 代码实现

下面是使用纯 JavaScript 实现的一些示例代码:

2.1 HTML 代码

<div class="carousel-container">
  <ul class="carousel-list">
    <li>
      <img src="img1.jpg" alt="img1">
    </li>
    <li>
      <img src="img2.jpg" alt="img2">
    </li>
    <li>
      <img src="img3.jpg" alt="img3">
    </li>
    <li>
      <img src="img4.jpg" alt="img4">
    </li>
  </ul>
  <div class="carousel-nav">
    <span class="nav-dot active"></span>
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
  </div>
</div>

2.2 CSS 代码

.carousel-container {
  position: relative;
  width: 640px;
  height: 360px;
  overflow: hidden;
}

.carousel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 2560px;
  animation: carousel 15s infinite;
}

.carousel-list li {
  float: left;
  width: 640px;
  height: 360px;
}

.carousel-list li img {
  display: block;
  width: 100%;
  height: 100%;
}

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

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

.active {
  background-color: #f60;
}

@keyframes carousel {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -640px;
  }
  45% {
    left: -640px;
  }
  50% {
    left: -1280px;
  }
  70% {
    left: -1280px;
  }
  75% {
    left: -1920px;
  }
  95% {
    left: -1920px;
  }
  100% {
    left: -2560px;
  }
}

2.3 JavaScript 代码

// 获取轮播图的元素
var carouselContainer = document.querySelector('.carousel-container');
var carouselList = document.querySelector('.carousel-list');
var carouselNav = document.querySelector('.carousel-nav');
var dots = document.querySelectorAll('.nav-dot');

// 计算每张图片的宽度和总数量
var picWidth = carouselContainer.offsetWidth;
var picNum = carouselList.children.length;

// 定义当前图片的索引
var currentIndex = 0;

// 通过设置 left 值实现轮播效果
function carousel() {
  currentIndex++;
  if (currentIndex >= picNum) {
    currentIndex = 0;
  }
  carouselList.style.left = -currentIndex * picWidth + 'px';
  setActiveDot(currentIndex);
}

// 设置当前激活的小圆点
function setActiveDot(index) {
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  dots[index].classList.add('active');
}

// 切换到指定的图片
function goTo(index) {
  currentIndex = index;
  carouselList.style.left = -currentIndex * picWidth + 'px';
  setActiveDot(currentIndex);
}

// 监听鼠标移入移出事件
carouselContainer.addEventListener('mouseover', function() {
  clearInterval(timer);
});

carouselContainer.addEventListener('mouseout', function() {
  timer = setInterval(carousel, 3000);
});

// 监听小圆点点击事件
carouselNav.addEventListener('click', function(event) {
  if (event.target.classList.contains('nav-dot')) {
    var index = Array.prototype.indexOf.call(dots, event.target);
    goTo(index);
  }
});

// 初始化
var timer = setInterval(carousel, 3000);

3. 注意事项

  1. 轮播图容器和图片的宽高必须设定为固定值,否则无法实现轮播效果。
  2. 轮播图容器需要设置 overflow: hidden; 才能实现图片的切换效果。
  3. 鼠标移入轮播图容器时,必须停止定时器,否则会产生冲突。
  4. 轮播图需要有指示器来提示当前图片的位置,用户可以点击指示器快速切换图片。
  5. 在移动设备上需要注意触摸事件的使用,可以使用 touchstart 和 touchend 实现手指滑动切换图片的效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js仿小米官网图片轮播特效 - Python技术站

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

相关文章

  • 利用JS生成博文目录及CSS定制博客

    下面是“利用JS生成博文目录及CSS定制博客”的完整攻略: 1. 生成博文目录 1.1 实现原理 利用JS生成博文目录的原理是通过JS获取博客文章的标题、对应的dom节点和锚点,然后利用DOM操作动态生成目录并插入到博客页面的特定位置。 1.2 示例代码 以下是一个简单的JS生成目录的示例代码,实现了获取所有标题,创建目录结构并添加到页面对应位置的功能。 /…

    css 2023年6月10日
    00
  • js+css实现回到顶部按钮(back to top)

    实现回到顶部按钮(back to top)的方法有很多种,其中一种使用js+css来实现。以下是实现该功能的详细步骤: 第一步:创建HTML结构 首先我们需要在HTML中创建一个按钮元素,并给它一个ID,例如: <button id="back-to-top">返回顶部</button> 第二步:添加CSS样式 接…

    css 2023年6月10日
    00
  • 纯CSS无hacks的跨游览器自适应高度多列布局 推荐

    以下是详细的“纯CSS无hacks的跨游览器自适应高度多列布局”的攻略: 概览 在前端开发中,我们常常需要实现类似Pinterest等网站的多列布局,这时候自适应高度就显得尤为重要。 本篇攻略将介绍如何通过纯CSS代码实现无hack、跨游览器的自适应高度多列布局。 原理 使用CSS3中的Flexible Box模型来实现布局。 具体来说,我们将父容器(con…

    css 2023年6月9日
    00
  • css让table不显示边框的代码在火狐和谷歌浏览器中无效

    要使表格不显示边框,一般可以设置table的border为0,或者使用CSS的border-collapse属性来控制表格边框的合并。但是在某些情况下,这种设置在火狐和谷歌浏览器中可能会无效。以下为解决方法: 方法一:添加样式“border-style:none !important;” 可以在CSS中额外添加一个样式,来明确指定边框样式为“none”。这个…

    css 2023年6月10日
    00
  • table中td内容换行问题

    当我们在网页中使用<table>元素创建表格时,表格的每个单元格会使用<td>元素来定义。在表格中,如果单元格中的内容过多,就需要让它自动换行,否则单元格的宽度会被拉伸,影响表格的美观和整体布局。下面我将讲解如何解决<td>元素中内容过多换行的问题。 通过设置word-wrap属性实现文字自动换行 word-wrap是一个…

    css 2023年6月10日
    00
  • Chrome的最小字体12px限制最终解决办法

    Chrome的最小字体12px限制最终解决办法 问题描述 在最新版本的Chrome浏览器中,存在一个最小字体12px的限制,在CSS中设置小于12px的字号时,会被自动替换为12px的字号。这个限制对于一些网站设计有一定影响,需要找到解决办法。 解决办法 Chrome的最小字体12px限制,主要是出于用户体验和防止欺诈等目的而设定。但是在某些情况下,这个限制…

    css 2023年6月9日
    00
  • CSS权重关系及问题剖析

    下面我会详细讲解“CSS权重关系及问题剖析”的完整攻略,包括CSS权重的基本概念,权重的计算方法,以及常见的问题剖析。同时,我会举两个具体的例子来说明。 什么是CSS权重? 在CSS中,同时存在多个样式时,就会出现样式的覆盖问题。这时,就需要通过CSS权重的定义来确定哪一个样式规则优先级更高,从而确定最终的样式表达式。 CSS权重用于确定样式优先级,其中,权…

    css 2023年6月9日
    00
  • JS 实现双色表格实现代码

    JS实现双色表格是一个常见的前端应用场景,本文将详细讲解如何使用JavaScript实现双色表格,并提供两个示例说明。 准备工作 在开始编写JS代码之前,需要准备一个HTML表格结构以供JS代码渲染;同时也需要一个CSS样式表来为表格添加样式。 以下是一个表格样例HTML代码: <table id="mytable"> &lt…

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