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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php读取本地json文件的实例
2018/03/07 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
javascript 写类方式之五
2009/07/05 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python如何在bool函数中取值
2020/09/21 Python
java字符串格式化输出实例讲解
2021/01/06 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
大课间活动制度
2014/01/18 职场文书
摄影助理岗位职责
2014/02/07 职场文书
三峡人家导游词
2015/01/31 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
java实现面板之间切换功能
2022/06/10 Java/Android