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中各字符串出现次数的工具
May 03 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
详细分析Node.js 模块系统
Jun 28 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
joomla组件开发入门教程
2016/05/04 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
javascript arguments使用示例
2014/12/16 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python内存管理实例分析
2019/07/10 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python 连续不等式语法糖实例
2020/04/15 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python安装后的目录在哪里
2020/06/21 Python
python不同系统中打开方法
2020/06/23 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
班主任工作年限证明
2014/01/12 职场文书
求职信范文怎么写
2014/01/29 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL