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 相关文章推荐
JS中的构造函数详细解析
Mar 10 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
护士自荐信范文
2013/12/15 职场文书
集中整治工作方案
2014/05/01 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
拉歌口号大全
2014/06/13 职场文书
2014年招商工作总结
2014/11/22 职场文书
公务员个人考察材料
2014/12/23 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
军事博物馆观后感
2015/06/05 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python