js实现支持手机滑动切换的轮播图片效果实例


Posted in Javascript onApril 29, 2015

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下:

运行效果如下:

js实现支持手机滑动切换的轮播图片效果实例

完整实例代码点击此处本站下载。

使用方法案例:

<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
 $('.carousel-image').CarouselImage({
  num :$('.carousel-num')
});
</script>

或者requirejs:

<div class="carousel-image">
<div>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
 </a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: '../src',
  paths: {
   $: 'zepto'
  }
});
require(['carousel-image',"$"], function(CarouselImage,$) {
  var cs = new CarouselImage();
  cs.init({
   target:$('.carousel-image'),
   num:$('.carousel-num')
  });
});
</script>

API 属性、方法及回调:

target:
表示是在这个容器内的元素会触发事件,它应该有个子级的容器,方便动画的优化

num:
本意是以显示当前索引的数字表示,但现在用样式把数字隐藏了,如果要显示数字样式,可自行更改样式文件

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Validform表单验证总结篇
Oct 31 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
jQuery实现冻结表格行和列
Apr 29 #Javascript
Js实现无刷新删除内容
Apr 29 #Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP模板引擎SMARTY
2006/10/09 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php中namespace及use用法分析
2016/12/06 PHP
Node.js模块加载详解
2014/08/16 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
vue生命周期的探索
2019/04/03 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python实现购物车程序
2018/04/16 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Tesserocr库的正确安装方式
2018/10/19 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
电子商务自荐书范文
2014/01/04 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
竞聘演讲稿
2014/04/24 职场文书
校园元旦活动总结
2014/07/09 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
小学教师年度个人总结
2015/02/05 职场文书
学生会自荐信
2019/05/16 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
MYSQL 运算符总结
2021/11/11 MySQL
利用Redis实现点赞功能的示例代码
2022/06/28 Redis