适用于手机端的jQuery图片滑块动画


Posted in Javascript onDecember 09, 2016

本文实例为大家分享了基于jQuery实现的手机端图片滑块动画源码,供大家参考,具体内容如下

效果图:

适用于手机端的jQuery图片滑块动画

在线预览 下载地址

实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适应手机端的jQuery图片滑块动画DEMO演示</title>
<link rel="stylesheet" href="/api/jq/5733e37626dcb/css/style.css" />
<script src="/api/jq/5733e37626dcb/js/islider.js"></script>
<script src="/api/jq/5733e37626dcb/js/plugins/islider_desktop.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<!--<h4 style="text-align: center">animateType参数中设置,目前支持default, rotate, flip 和 depth, 点击按钮看效果</h4>-->
<div id="iSlider-effect-wrapper">
 <div id="animation-effect" class="iSlider-effect"></div>
</div>
<div id="menu-select">
 <span class="on">default</span>
 <span>rotate</span>
 <span>flip</span>
 <span>depth</span>
</div>
<h4 style="text-align: center">垂直轮播</h4>
<div id="vertical-slide" class="iSlider-effect"></div>
<h4 style="text-align: center">不循环模式(最始及最末图片滑动会有衰减效果)</h4>
<div id="non-looping" class="iSlider-effect"></div>
<h4 style="text-align: center">DOM</h4>
<div id="dom-effect" class="iSlider-effect"></div>
<script>
  var picList = [
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/1.jpg",
  },
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/2.jpg",
  },
  {
   width: 150,
   height: 207,
   content: "/api/jq/5733e37626dcb/images/3.jpg",
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/5.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/6.jpg"
  },
  {
   width: 300,
   height: 414,
   content:"/api/jq/5733e37626dcb/images/7.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/8.jpg"
  },
  {
   width: 150,
   height: 207,
   content:"/api/jq/5733e37626dcb/images/9.jpg"
  }
  ];
  var domList = [
  {
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
  },{
   'height' : '100%',
   'width' : '100%',
   'content' : '<div><h1>Page3</h1><h2>This is page3</h2><p>page3 is pretty awsome</p><div>'
  }
  ];
  //all animation effect
  var islider1 = new iSlider({
   data: picList,
   dom: document.getElementById("animation-effect"),
   duration: 2000,
   animateType: 'default',
   isAutoplay: true,
   isLooping: true,
   // isVertical: true, 是否垂直滚动
  });
  islider1.bindMouse();
  //vertical slide
  var islider2 = new iSlider({
   data: picList,
   dom: document.getElementById("vertical-slide"),
   duration: 2000,
   animateType: 'default',
   isVertical: true,
   isAutoplay: true,
   isLooping: true,
  });
  islider2.bindMouse();
  //不循环 不自动播放
  var islider3 = new iSlider({
   data: picList,
   dom: document.getElementById("non-looping"),
   animateType: 'default',
  });
  islider3.bindMouse();
  //滚动dom
  var islider4 = new iSlider({
   data: domList,
   dom: document.getElementById("dom-effect"),
   type: 'dom',
   animateType: 'default',
   isAutoplay: true,
   isLooping: true,
  });
  islider4.bindMouse();
  var menu = document.getElementById('menu-select').children;
  function clickMenuActive(target) {
   for (var i = 0; i < menu.length; i++) {
    menu[i].className = '';
   }
   target.className = 'on';
  }
  menu[0].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[1].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[2].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
  menu[3].onclick = function() {
   clickMenuActive(this);
   islider1._opts.animateType = this.innerHTML;
   islider1.reset();
  };
</script>
<!-- 代码 结束 -->
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
浅析javascript中的Event事件
Dec 09 #Javascript
清除js缓存的多种方法总结
Dec 09 #Javascript
Vue.js计算属性computed与watch(5)
Dec 09 #Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 #Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 #Javascript
vue.js绑定class和style样式(6)
Dec 09 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
react 创建单例组件的方法
2018/04/26 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Python 实现简单的客户端认证
2020/07/29 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
物业管理求职自荐信
2013/09/25 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
珍惜水资源建议书
2014/03/12 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers