适用于手机端的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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
js中如何完美的解析数据
Mar 18 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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
PHP6 mysql连接方式说明
2009/02/09 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
jQuery实现可以扩展的日历
2020/12/01 jQuery
javascript实现移动端轮播图
2020/12/09 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
用Python进行简单图像识别(验证码)
2018/01/19 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python编写猜数字小游戏
2019/10/06 Python
pygame实现打字游戏
2021/02/19 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
行政管理专业求职信
2014/07/06 职场文书
工厂标语大全
2014/10/06 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
python图片灰度化处理的几种方法
2021/06/23 Python
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL