基于iScroll的Carousel插件

最近在想着使用iScroll创建在手机端模拟原生APP的一些效果,前段时间有实现下拉刷新,而这次则是一个轮播广告条的一个插件,主要是对iScrollindicators功能的一个进一步增强。

概况

我觉得这里,应该先给出两个实例才行,这里有一个例子:

这个例子中,我把最可能常用的两种情况,都进行一个说明,先看下效果吧。

二维码地址:

源代码查看网址:http://www.zhangyunling.com/study/2015/20150321/scrollCarousel.html

看到例子之后,如果还有兴趣,请继续查看用法,如果没有兴趣的,就可以直接在这里结束了。

构造函数细节

本方法是基于iScroll v5.1.3版本实现的,所以,基本要求就是,您至少要对该插件有一定的认识,所以,如果您对这个并不了解,也可以直接使用上述例子中现成的代码结构了。

构造函数名为:ScrollCarousel,接收三个参数


ScrollCarousel(scrollId,options,other);


其中前两个参数是和iScroll插件支持的两个参数完全相同的概念,有需要详细了解的,请参考:iScroll官网(http://iscrolljs.com/)。

第三个参数other对象,当前只支持三个属性:


other = {
    circle:true,
    automatic:true,
    autoTime:2000
};
//other也是一个对象,主要用于图片左右滑动方面的数据,属性包括:
// circle:true/fasle,
// circle表示该左右滑动,是否为循环滑动模块,默认为true
// circle的动作时间,请在options的snapSpeed中控制
// automatic:true/false,
// automatic表示是否会自动按时向左滑动,默认为true
// autoTime:2000,
// autoTime表示自动滑动时的间隔时间


关于使用

该方法的使用,需要一个固定的结构,并且一些className也需要固定的,同时需要对应的CSS文件,和对应的JS都引入。

HTML结构如下:


<div class = "carousel-area">
    <div id = "carousel" class = "carousel width-height-scale" style = "padding-bottom:100px;">
	<div class = "carousel-containter">
	    <div class="carousel-slide">1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
	    <div class="carousel-slide">2222</div>
	    <div class="carousel-slide">3333</div>
	    <div class="carousel-slide">4444</div>
	</div>
    </div>
    <div class = "indicator">
	<div class = "indicator-dotty"></div>
	<div class = "indicator-content">
	    <div class = "dotty-target"></div>
	    <div class = "dotty-target"></div>
	    <div class = "dotty-target"></div>
	    <div class = "dotty-target"></div>
	</div>
	<div class = "indicator-overlay">
	    <div class = "left-overlay"></div>
	    <div class = "right-overlay"></div>
	</div>
    </div>
</div>


其中,className = "carousel-slide"div内部,即表示框内容框内部显示部分,可以在内部定义一些特定的结构,或者一些图片显示等信息。

并且,className = "dotty-target"div个数,要和className = "carousel-slide"div个数相同,以保证元素的对应性。

当你有了如上的HTML结构,就可以在加载对应的JS之后,对其实例化:


var carousel = new ScrollCarousel("carousel",{
    scrollX: true,
    scrollY: false,
    momentum: false,
    snap: true,
    snapSpeed: 400,
    keyBindings: true,
    click:true,
    indicators: {
	ignoreBoundaries: false,
	resize: false
    }
});

//这里第一个元素使用的id="carousel"来确定到该元素,也可以使用其他的一些方法,这个就看个人喜好了。


上述的实例化之后,返回的变量carousel依然可以按照自己的要求进行一些额外功能的添加,这个就属于iScroll中的一些方法了,请去iScroll官网查看详细内容。

在我上面给的示例中,并没有自定义第三个对象,而是使用的默认的属性实现,这个写法也就是在本文开头给出的示例页面中,第一个示例的实例化样式。

如果想要更好的控制这些,达到一个自己想要的效果,就要对第二个和第三个参数有一定的了解。关于这些,请自行参考。

也可以参考本文最初给的一个示例页面,查看源代码即可看到所有的。

总结

iScroll的基础上的进一步封装,可以按照自己的要求在该构造函数的基础上,进一步封装,以完成更特定的一些功能,按个人喜好来。

样式自己可以根据喜好更改一些,只要不改变结构即可,有兴趣的可以自行扩展。

本文地址:http://www.zhangyunling.com/?p=378

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>