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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
关于js遍历表格的实例
Jul 10 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
Vue中全局变量的定义和使用
Jun 05 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中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
微信分享调用jssdk实例
2017/06/08 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
走群众路线剖析材料
2014/10/09 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
python中filter,map,reduce的作用
2022/06/10 Python