carousel-image

自定义宽高

不定宽高自适应,循环

不定宽高自适应,不循环

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

使用方法案例:

<script type="text/javascript" src="../src/zepto.js"></script>
	<script type="text/javascript" src="../src/carousel-image.js"></script>
	<script>
	$('.carousel-image1').CarouselImage({
		num :$('.carousel-image1 .carousel-num'),
		width:320,
		height:240
	});
	$('.carousel-image2').CarouselImage({
		num :$('.carousel-image2 .carousel-num'),
		repeat:true
	});
	$('.carousel-image3').CarouselImage({
		num :$('.carousel-image3 .carousel-num')
	});
	</script>

或者requirejs:

<div class="carousel-image">
	    <div>
	        <a>
	            <img src="http://ott.wansecheng.com/weidian/wdgoods/1430073193462.jpg"/>
	        </a>
	        <a>
	            <img src="http://ott.wansecheng.com/weidian/wdgoods/1430073252953.png"/>
	        </a>
	        <a>
	            <img src="http://ott.wansecheng.com/weidian/wdgoods/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:

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

width:

    宽度  (如果不设置将按第一张加载完成图片的大小来等比压缩显示)

height:

    高度 (如果不设置将按第一张加载完成图片的大小来等比压缩显示)

timer:

   动画延时

animate:

  动画时间

其它组件推荐

源码在github上托管,请尽量到github上下载最新代码!也可以提交Issues. 如果您发现demo无法使用时,请多刷新几次,可能是js文件没有加载成功。