适用于手机端的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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
js实现每日签到功能
Nov 29 Javascript
layui的select联动实现代码
Sep 28 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python定时执行之Timer用法示例
2015/05/27 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python实现人脸签到系统
2020/04/13 Python
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
2015入党自传书范文
2015/06/26 职场文书
交通事故协议书范本
2016/03/19 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS