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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
在PHP中使用模板的方法
2008/05/24 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python 爬取微信文章
2016/01/30 Python
python 性能提升的几种方法
2016/07/15 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
毕业生自我推荐
2013/11/04 职场文书
工程业务员工作职责
2013/12/07 职场文书
行政部主管岗位职责
2013/12/28 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
保险公司早会主持词
2014/03/22 职场文书
七一党日活动总结
2014/07/08 职场文书
教师岗位职责
2015/02/03 职场文书