`

纯JS打造移动端触屏滑动图片集

    博客分类:
  • js
阅读更多

效果图PC端:

  1. 支持点击浏览
  2. 支持方向键浏览
  3. 支持图片延迟加载
  4. 支持自动定时加载

 

效果图手机端:

  1. 支持自动定时加载
  2. 支持图片延迟加载
  3. 支持点击浏览
  4. 支持触屏滑动浏览

 

 

HTML代码片段:

 

<div class="slide">
    <ul></ul>
    <div class="dot"></div>
</div>

 

 

CSS代码片段:

 

.slide {position: relative; max-width: 440px;min-height: 480px; overflow: hidden; margin: 0px auto; }
.slide:after {content: ''; display: block; width: 100%; padding-top: 50%; }
.slide ul {position: absolute;left: 0; top: 0;width: 100%;height: 100%;padding: 0;margin: 0;}
.slide li {list-style: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.slide li:first-child {z-index: 1;}
.slide li.cur {z-index: 1;transition:left .2s linear;}
.slide li img {position: absolute;left: 0; top: 0;width: 100%;height: 100%;border: none;}
.slide .dot {position: absolute; left: 50%; bottom: 10px;margin-left: -40px; font-size: 0;z-index: 2;}
.slide .dot span {display:inline-block;padding: 6px;margin-left:4px;-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;background:#fff;cursor: pointer}
.slide .dot .cur {background:#34c751}

  

 

JS代码片段:

 

 

// 设置图片源
var imgData = [
  'http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiqwwi9j20dw0dw76i.jpg',
  'http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jirk5urj20dw0dwgnp.jpg',
  'http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jis72jcj20dw0dwmz9.jpg',
  'http://ww4.sinaimg.cn/bmiddle/9e5389bbjw1ez7jist323j20dw0dwq4i.jpg',
  'http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jithb2gj20dw0dwjss.jpg',
  'http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiu53trj20dw0dwdhq.jpg',
  'http://ww2.sinaimg.cn/bmiddle/9e5389bbjw1ez7jixx545j20dw0dwn04.jpg',
  'http://ww3.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiymhv8j20dw0dw0vh.jpg',
  'http://ww1.sinaimg.cn/bmiddle/9e5389bbjw1ez7jiza47wj20dw0dw40q.jpg'
];
var imgSize = imgData.length;
var slideObj = document.querySelector('.slide');
var slideUlObj = document.querySelector('.slide ul');
var dotObj = slideObj.querySelector('.dot');
dotObj.style.marginLeft = -8 * imgSize + 'px';

for (var i = 0; i < imgSize; i++) {
  var liObj = document.createElement('li');
  var imgObj = document.createElement('img');
  var imgSrc = imgData[i];
  // 添加延迟加载图片机制
  if (i == 0) imgObj.src = imgSrc;
  else imgObj.dataset.src = imgSrc;
  liObj.appendChild(imgObj);
  slideUlObj.appendChild(liObj);

  var spanObj = document.createElement('span');
  if (i == 0) spanObj.className = 'cur';
  // 绑定圆圈点击事件
  spanObj.onclick = function() {
    var index = Array.prototype.indexOf.call(dotObj, this);
    swipeImg(index);
  };
  dotObj.appendChild(spanObj);
}

var curIndex = 1;
var imgObj = slideObj.querySelectorAll('ul li');
var dotObj = slideObj.querySelectorAll('.dot span');

var swipeImg = function(index) {
  index = index >= imgSize ? 0 : index < 0 ? imgSize - 1 : index;
  for (var i = 0; i < imgSize; i++) {
    dotObj[i].className = '';
    imgObj[i].className = '';
  }
  var curImgObj = imgObj[index];
  dotObj[index].className = 'cur';
  curImgObj.className = 'cur';

  var imgSubObj = curImgObj.querySelector('img');
  if (imgSubObj.dataset.src) {
    imgSubObj.src = imgSubObj.dataset.src;
    delete imgSubObj.dataset.src;
  }
  curIndex = index;
};

setInterval(function() {
  swipeImg(curIndex);
  curIndex++;
}, 3000);

var touchEvent = {
  // 判断设备是否支持touch事件
  touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  events: {
    slider: slideUlObj,
    handleEvent: function(event) {
      if (event.type == 'touchstart') {
        this.start(event);
      } else if(event.type == 'touchmove') {
        this.move(event);
      } else if(event.type == 'touchend') {
        this.end(event);
      }
    },
    start: function(event) {
      event.preventDefault();                      // 阻止触摸事件的默认动作,即阻止滚屏
      var touch = event.touches[0];                // touches数组对象获得屏幕上所有的touch,取第一个touch
      startPos = {                                 // 取第一个touch的坐标值
        x: touch.pageX,
        y: touch.pageY,
        time: +new Date
      };

      this.slider.addEventListener('touchmove', this, false);
      this.slider.addEventListener('touchend', this, false);
    },
    move: function(event) {
      event.preventDefault();                      // 阻止触摸事件的默认行为,即阻止滚屏

      // 当屏幕有多个touch或者页面被缩放过,就不执行move操作
      if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
      var touch = event.touches[0];
      endPos = {
        x: touch.pageX - startPos.x,
        y: touch.pageY - startPos.y
      };
    },

    // 滑动释放
    end: function(event) {
      var duration = +new Date - startPos.time;    // 滑动的持续时间

      if (Number(duration) > 100) {
        // 判断是左移还是右移,当偏移量大于50时执行
        if (endPos.x > 50) {
          swipeImg(curIndex - 1);
        } else if(endPos.x < -50) {
          swipeImg(curIndex + 1);
        }
      }

      // 解绑事件
      this.slider.removeEventListener('touchmove', this, false);
      this.slider.removeEventListener('touchend', this, false);
    }
  }
};

if(!!touchEvent.touch) touchEvent.events.slider.addEventListener('touchstart', touchEvent.events, false);

document.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 33:
    case 37:
    case 38:
      swipeImg(curIndex - 1);
      break;
    case 9:
    case 32:
    case 34:
    case 39:
    case 40:
      swipeImg(curIndex + 1);
      break;
  }
  event.preventDefault();
}, false);

 

 

 

 

 

 

更多相关:

                             在线预览: http://each.sinaapp.com/pictures/pure-js-gallery.html

                             Angular在线教程: http://each.sinaapp.com/angular

 

                             React在线教程: http://each.sinaapp.com/react

                             永久链接: http://qiaolevip.iteye.com/blog/2260615

                             预览文章: PhpStorm10最新版破解注册激活码(图文版)

                             永久链接: http://qiaolevip.iteye.com/blog/2260617

                             预览文章: IntelliJ IDEA15最新版破解注册激活码(图文版

                             永久链接: http://qiaolevip.iteye.com/blog/2260620

                             预览文章: CLion1.2最新版破解注册激活码(图文版)

                             永久链接: http://qiaolevip.iteye.com/blog/2260627

                             预览文章: RubyMine8最新版破解注册激活码(图文版

                             永久链接: http://qiaolevip.iteye.com/blog/2260628

                             预览文章: PyCharm5最新版破解注册激活码(图文版)

                             永久链接: http://qiaolevip.iteye.com/blog/2264038

                             预览文章: PyCharm5.0.2最新版破解注册激活码(图文版)

 

  • 大小: 172.6 KB
  • 大小: 261.5 KB
分享到:
评论

相关推荐

    swiper移动端触屏滑动图片轮播切换代码.zip

    在本项目"swiper移动端触屏滑动图片轮播切换代码.zip"中,我们可以看到一个使用 Swiper.js 的实现,用于创建一个带有索引、左右切换按钮以及触屏滑动功能的移动端图片轮播。 首先,我们需要了解Swiper.js的核心特性...

    移动端触屏滑动导航菜单

    本篇文章将详细探讨移动端触屏滑动导航菜单的设计原理、实现方式以及优化策略。 一、设计原理 1. 滑动菜单的出现:滑动导航菜单通常隐藏在屏幕边缘,当用户触摸并滑动屏幕时,菜单会以动画效果滑出,展示更多的...

    轮播图插件,支持手机移动端触屏滑动

    在移动设备上,考虑到触摸屏的特性,支持触屏滑动的轮播图插件更是不可或缺,能够优化用户的浏览体验,使得内容展示更加流畅和自然。以下将详细介绍轮播图插件及其在手机移动端触屏滑动上的实现。 轮播图插件的核心...

    jQuery移动端触屏滑动日期控件

    针对移动端的交互需求,jQuery移动端触屏滑动日期控件应运而生,它允许用户通过手指滑动来选择日期,提供了一种直观且高效的日期选择体验。 该控件主要基于jQuery Mobile或jQuery UI等框架构建,它将日期选择器转化...

    jQuery移动端触屏滑动日期控件(mobiscroll时间控件)Demo

    **jQuery 移动端触屏滑动日期控件——Mobiscroll 时间控件** Mobiscroll 是一个高效、响应式的JavaScript库,专为移动设备设计,同时也兼容桌面浏览器。它提供了一套完整的日期和时间选择器,使得在网页应用中添加...

    一个用于原生JS的移动端的可触摸滑动的轮播控件

    本项目名为"yu-carousel-master",是一个专为原生JavaScript设计的移动端触摸滑动轮播控件。这个控件适用于那些希望在不依赖任何库或框架的情况下实现高性能滑动效果的开发者。 一、原生JavaScript的优势 原生...

    jQuery移动端触屏滑动日期控件.zip

    "jQuery移动端触屏滑动日期控件"正是这样一种工具,它利用了jQuery库和Mobiscroll插件,为移动应用或网站提供了高效、易用的日期选择功能。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画...

    【JavaScript源代码】JS实现移动端上下滑动一次一屏.docx

    在本文中,我们将深入探讨如何使用JavaScript来实现移动端页面的上下滑动一次一屏功能,同时结合其他相关特性,如头部选项卡切换、左右滑动、头部跟随动画以及双击选项卡回到顶部。这个功能对于优化移动设备上的用户...

    JS实现移动端整屏滑动的实例代码

    本文将详细阐述如何使用JavaScript来实现移动端页面的整屏滑动效果,重点在于检测用户在屏幕上滑动的方向以及滑动操作的逻辑实现。 首先,实现移动端整屏滑动效果的核心思路是通过监听用户触摸屏幕的事件,主要通过...

    移动端左右滑动插件

    标题中的“移动端左右滑动插件”是指一种专门用于移动设备的JavaScript库或组件,它使得网页元素可以响应用户的横向滑动手势,进而实现内容的平滑过渡。这种插件通常具有良好的触控支持,能提供流畅的用户体验,并且...

    移动端图片放大滑动查看-photoswipe的使用

    "移动端图片放大滑动查看-photoswipe的使用"这个主题聚焦于如何利用Photoswipe这个JavaScript库来提升用户查看和交互图片的体验。Photoswipe是一款强大的轻量级库,专为移动设备设计,能够实现图片的滑动查看、放大...

    JS 移动端的Tab触屏滑动特效

    本文将深入探讨如何使用JavaScript实现移动端Tab切换的触屏滑动特效。在实际的移动应用或响应式网站设计中,这样的功能能够提升用户体验,使得用户可以更流畅地在不同的内容板块之间切换。 首先,我们需要理解触屏...

    Zepto.js移动端左右滑动导航菜单.zip

    总的来说,"Zepto.js移动端左右滑动导航菜单"项目展示了如何利用JavaScript库,特别是Zepto.js,来实现移动设备上的常见交互功能。通过理解和实践这个项目,开发者可以进一步提升在移动开发领域的技能,创造更加流畅...

    Swiper移动端触摸滑动

    Swiper移动端触摸滑动 Swiper 是一个非常流行的移动端触摸滑动插件,可以帮助开发者快速创建炫酷的轮播、左右切换tab、翻页、上下切换页面等效果。下面我们将对 Swiper 的相关知识点进行详细的解释。 Swiper 的...

    3D旋转图片滑动轮播,适配移动端

    4. **触摸交互**:针对移动端优化的3D图片轮播通常支持手势操作,如滑动、捏合等,使用户可以通过简单的手指动作来控制图片的切换,提升了用户体验。 5. **适配移动端**:为了在各种不同尺寸和分辨率的移动设备上...

    jQuery移动端导航栏滑动菜单.zip

    "jQuery移动端导航栏滑动菜单"就是一个专为触摸设备设计的交互组件,它利用了jQuery库的强大功能,实现了在小屏幕设备上优雅的菜单切换效果。 jQuery是一个轻量级的JavaScript库,以其简洁的API和高效的性能深受...

    jq移动端触摸滑动轮播图特效 亲测有效

    本教程将探讨使用jQuery库实现的移动端触摸滑动轮播图特效,适用于手机和平板等触屏设备。jQuery作为一款强大的JavaScript库,使得创建交互式网页变得更为简单。 首先,我们从`index.html`文件入手。这个文件是网页...

    JS 移动端的焦点图触屏滑动

    在移动端的网页设计中,焦点图(也称为轮播图或滑动图片展示)是一种常见的元素,用于在有限的空间内展示多张图片或信息。在JS(JavaScript)中实现这样的功能,可以提供用户友好的触屏滑动体验,增强网站的交互性。...

    jQuery结合Mobiscroll插件实现的移动端触屏滑动日期控件效果源码.zip

    本资源“jQuery结合Mobiscroll插件实现的移动端触屏滑动日期控件效果源码.zip”正是为此目的而设计的。该压缩包包含了一个基于jQuery的解决方案,利用了流行的Mobiscroll插件,它提供了流畅且触摸友好的日期滚动功能...

Global site tag (gtag.js) - Google Analytics