您所在的位置:小祥子 » 编程 » JavaScript » 正文

[js开源组件开发]js轮播图片支持手机滑动切换

时间:2015-04-30 编辑:田想兵 来源:本站整理

JS轮播图片支持手机滑动切换

carousel-image

轮播图片,支持触摸滑动。 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-image.html

github地址:https://github.com/tianxiangbing/carousel-image

轮播图片,支持触摸滑动。

使用方法案例:

<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="/article/UploadPic/2015-4/201543065241278.jpg"/>
	        </a>
	        <a>
	            <img src="/article/UploadPic/2015-4/201543065242432.png"/>
	        </a>
	        <a>
	            <img src="/article/UploadPic/2015-4/201543065242451.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:

   本意是以显示当前索引的数字表示,但现在用样式把数字隐藏了,如果要显示数字样式,可自行更改样式文件

  

关键词:组件 图片 手机