js实现支持手机滑动切换的轮播图片效果实例
更新时间：2015年04月29日 11:55:54 作者：田想兵
这篇文章主要介绍了js实现支持手机滑动切换的轮播图片效果,实例分析了javascript实现图片切换的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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实现Table间隔色以及选择高亮(和动态切换数据)的方法
这篇文章主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下2015-05-05
电商系统中订单、库存中有数字等加减乘除算术,下面这篇文章主要给大家介绍了关于利用Math.js解决JS计算小数精度丢失问题的相关资料,mathjs是一个前端在计算上面必定会用到的类库,需要的朋友可以参考下2022-04-04
微信公众号授权登录的使用最为常见,当然只是一些会只有登录,所以选择点击授权登,下面这篇文章主要给大家介绍了微信公众号授权登录的超详细步骤,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JavaScript验证Email的3种方法，需要的朋友可以参考下2015-09-09
JavaScript是一个神奇的语言，字符串转数字有5种方法，各有各的坑法!接下来通过本文给大家介绍JavaScript字符串转数字的5种方法及其陷阱，感兴趣的朋友一起看看吧2018-07-07
FLASH 广告外部链接实现代码2008-12-12
JavaScript 中encodeURI,encodeURIComponent与escape的区别和注2010-08-08
本文主要介绍了webpack之基础打包优化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>2022-02-02
这篇文章主要为大家详细介绍了js+css全屏侧边栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了JS图片懒加载技术实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
最新评论