JS仿京东移动端手指拨动切换轮播图效果

下面是总体的攻略:

1. 需求分析

首先需要明确需求,也就是要实现一个仿京东移动端的轮播图效果。该效果的主要特点有:

  • 手指拖动轮播图时,图片可以随着手指滑动而跟随移动,并在释放时自动定到下一个或上一个轮播图。
  • 轮播图可以自动循环播放
  • 底部的小圆点可以随着轮播图的切换而同步更新

2. 技术选型

实现这个效果需要使用以下技术:

  • HTML、CSS、JavaScript
  • jQuery
  • Hammer.js(一个常用的移动端手势库)

3. 实现步骤

3.1 HTML结构

首先需要定义HTML结构,基本上就是一个容器,里面包含了不同的轮播图和底部的小圆点。示例如下:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="img1.jpg"></li>
    <li class="slider-item"><img src="img2.jpg"></li>
    <li class="slider-item"><img src="img3.jpg"></li>
  </ul>
  <ul class="slider-dots">
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
  </ul>
</div>

3.2 CSS样式

接下来是CSS样式的设置,包括容器的宽高,轮播图的宽度和位置,以及小圆点的样式等。这里不再赘述。示例如下:

.slider {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.slider .slider-wrapper {
  width: 300%;
  height: 100%;
  position: relative;
  left: -100%;
}
.slider .slider-item {
  float: left;
  width: 33.333%;
  height: 100%;
  position: relative;
}
.slider .slider-item img {
  width: 100%;
  height: 100%;
}
.slider .slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.slider .slider-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
}
.slider .slider-dot.active {
  background-color: #f00;
}

3.3 JavaScript代码

最后是JavaScript代码的编写,包括了自动轮播和手势拖动效果的实现。示例如下:

$(function() {
  var $sliderWrap = $('.slider-wrapper');
  var $sliderItems = $('.slider-item');
  var $sliderDots = $('.slider-dot');

  var slider = {
    len: $sliderItems.length,
    curIdx: 0,
    fromIdx: 0,
    toIdx: 0,
    isAnimating: false,
    autoPlayTimer: null,

    init: function() {
      var _this = this;

      // 初始化轮播图显示
      $sliderWrap.css('left', '-100%');
      $sliderItems.eq(0).clone().appendTo($sliderWrap);
      $sliderItems.eq(-1).clone().prependTo($sliderWrap);

      // 初始化小圆点
      $sliderDots.eq(0).addClass('active');
      $sliderDots.on('click', function() {
        var idx = $(this).index();
        _this.toIdx = idx;
        _this.move();
      });

      // 自动轮播
      this.autoPlay();

      // 手势操作
      this.bindTouchEvents();
    },

    autoPlay: function() {
      var _this = this;
      clearInterval(this.autoPlayTimer);
      this.autoPlayTimer = setInterval(function() {
        _this.toNext();
      }, 3000);
    },

    toNext: function() {
      this.toIdx = this.curIdx + 1;
      this.move();
    },

    toPrev: function() {
      this.toIdx = this.curIdx - 1;
      this.move();
    },

    move: function() {
      var _this = this;

      if (_this.isAnimating) {
        return;
      }

      _this.isAnimating = true;

      // 修改小圆点
      $sliderDots.eq(_this.curIdx).removeClass('active');
      $sliderDots.eq(_this.toIdx).addClass('active');

      // 目标位置
      var toPos = -(_this.toIdx + 1) * 100 / (_this.len + 2) + '%';

      // 动画移动
      $sliderWrap.animate({ left: toPos }, 500, function() {
        // 判断是否需要重置轮播图位置
        if (_this.toIdx >= _this.len) {
          $sliderWrap.css('left', '-100%');
          _this.curIdx = 0;
          _this.fromIdx = 0;
          _this.toIdx = 0;
        } else if (_this.toIdx < 0) {
          $sliderWrap.css('left', -(_this.len * 100 / (_this.len + 2)) + '%');
          _this.curIdx = _this.len - 1;
          _this.fromIdx = _this.len - 1;
          _this.toIdx = _this.len - 1;
        } else {
          _this.curIdx = _this.toIdx;
          _this.fromIdx = _this.toIdx;
        }
        _this.isAnimating = false;
      });
    },

    bindTouchEvents: function() {
      var _this = this;

      // 使用Hammer.js绑定手势事件
      var hammer = new Hammer($('.slider')[0]);
      hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 20 });

      hammer.on('swipeleft', function() {
        _this.toNext();
      });

      hammer.on('swiperight', function() {
        _this.toPrev();
      });

      hammer.on('panstart', function() {
        clearInterval(_this.autoPlayTimer);
        $sliderWrap.stop(true, true);
      });

      hammer.on('panmove', function(e) {
        var delta = e.deltaX / $(window).width();
        $sliderWrap.css('left', -(_this.curIdx + 1 - delta) * 100 / (_this.len + 2) + '%');
      });

      hammer.on('panend', function(e) {
        if (e.deltaX / $(window).width() > 0.2) {
          _this.toPrev();
        } else if (e.deltaX / $(window).width() < -0.2) {
          _this.toNext();
        } else {
          _this.move();
        }
        _this.autoPlay();
      });
    }
  }

  slider.init();
});

4. 示例说明

示例1:增加新的轮播图

通过修改HTML结构,将新轮播图img4.jpg添加到列表中:

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item"><img src="img1.jpg"></li>
    <li class="slider-item"><img src="img2.jpg"></li>
    <li class="slider-item"><img src="img3.jpg"></li>
    <li class="slider-item"><img src="img4.jpg"></li>
  </ul>
  <ul class="slider-dots">
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
    <li class="slider-dot"></li>
  </ul>
</div>

然后在CSS中修改轮播图包裹元素的宽度和轮播图item的宽度为25%:

.slider .slider-wrapper {
  width: 400%;
  height: 100%;
  position: relative;
  left: -100%;
}
.slider .slider-item {
  float: left;
  width: 25%;
  height: 100%;
  position: relative;
}

最后刷新页面,可以看到新增的轮播图以及底部的小圆点已经同步更新。

示例2:关闭自动播放功能

通过注释掉轮播图对象slider对象的autoPlay()方法即可。

slider.init();
// slider.autoPlay();

然后刷新页面,可以发现轮播图不再自动播放。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS仿京东移动端手指拨动切换轮播图效果 - Python技术站

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

相关文章

  • vscode安装使用的详细教程

    VS Code安装使用的详细教程 下载安装 首先我们需要下载VS Code安装包,可以在VS Code官网(https://code.visualstudio.com/)上直接下载,也可以使用终端命令进行下载和安装。以下是在终端(MacOS或Linux系统)中通过命令行下载并安装的步骤: # 下载安装包 wget -O vscode.deb https://…

    css 2023年6月9日
    00
  • jquery实现不同大小浏览器使用不同的css样式表的方法

    jQuery是JavaScript库之一,其提供了灵活的方法来帮助我们解决浏览器兼容性问题。如果我们要根据不同大小的浏览器使用不同的css样式表,可以按照以下步骤通过jQuery实现。 创建两个不同的CSS样式表创建两个不同的CSS样式表,一个用于大屏幕(例如:电脑端),另一个用于小屏幕(例如:手机端)。这里我们创建两个CSS样式表,并将它们分别命名为lar…

    css 2023年6月9日
    00
  • 固定背景实现的背景滚动特效示例分享

    接下来我将详细讲解“固定背景实现的背景滚动特效示例分享”的完整攻略。 1. 概述 固定背景实现的背景滚动是一种常见的网页背景特效,通常用于增强页面的视觉效果和交互性。在这种特效中,背景图片或者颜色会固定在页面后面,而页面的主要内容则通过滚动条来滚动。本篇攻略将介绍如何使用CSS实现固定背景实现的背景滚动特效。 2. 实现方法 2.1 在CSS中设置背景图像或…

    css 2023年6月10日
    00
  • Vue 使用超图SuperMap的实践

    下面我将为您提供一份“Vue 使用超图SuperMap的实践”的完整攻略: Vue 使用超图SuperMap的实践 背景 超图SuperMap是一款常用的GIS地理信息系统,而Vue是一个流行的前端框架,本攻略旨在介绍如何在Vue项目中使用超图SuperMap。 前置条件 了解Vue框架的基础知识,包括Vue组件、数据绑定、生命周期等。 能够基础的HTML、…

    css 2023年6月10日
    00
  • 举例详解CSS3中的Transition

    下面我将根据您的需求,为您详细讲解“举例详解CSS3中的Transition ”的完整攻略。 一、什么是CSS3中的Transition Transition是CSS3中新增的一个属性,用于实现CSS动画效果,可以控制HTML元素从一种样式逐渐转变为另一种样式的过程。 二、Transition的语法 以下是Transition的语法: transition:…

    css 2023年6月10日
    00
  • 转载:On having layout

    转载:On having layout 简介 On having layout 是一篇由Mark Boulton撰写的文章,主要讲解了如何在网页设计中正确使用布局。本文将对这篇文章进行详细解释和说明。 内容 在网页设计中,布局是至关重要的,它直接影响了页面的可读性和用户体验。在文章最开始,作者就针对布局的重要性进行了强调。在这篇文章中,作者主要讲解了以下四个…

    css 2023年6月13日
    00
  • 基于jQuery实现响应式圆形图片轮播特效

    请你耐心看完以下的详细讲解: 第一步:创建HTML结构 首先,我们需要创建包含图片轮播的HTML结构。需要注意的是,我们需要使用无序列表(<ul>)来承载图片。代码示例如下: <div class="slideshow-container"> <ul class="slideshow"&g…

    css 2023年6月10日
    00
  • 关于Web前端神器 Sublime Text 2 的介绍

    Web前端神器 Sublime Text 2 的介绍 Sublime Text 2 是一款被广泛使用的文本编辑器,尤其是在Web前端开发领域。本篇文章将通过介绍Sublime Text 2的特点、优点以及常用插件来帮助你更好地使用这个工具。 特点 Sublime Text 2 具有以下特点: 跨平台:支持Windows、macOS、Linux等常见操作系统。…

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