scrollimg.js

最新推荐文章于 2021-06-04 22:59:28 发布

原创最新推荐文章于 2021-06-04 22:59:28 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery样式

js 专栏收录该内容

3 篇文章

订阅专栏

引用scrollimg.js

(function(win, doc, $) {
	var scrollImg = {
		
		fxcurr:function(){
			if(!_this.def){
					this.lfclick.find("b").addClass("curr");
				}else{
					this.lfclick.find("b").removeClass("curr");
				}
			if(_this.def==-(_this.clonum-1)){
					this.rfclick.find("b").addClass("curr");
				}else{
					this.rfclick.find("b").removeClass("curr");
				}	
				_this.scrollele.stop().animate({left:_this.width*_this.slen*_this.def},_this.speed,_this.easing);
		},
		lbind:function(){
			this.lfclick.click(function(){
				_this.def=_this.def++>=0?0:_this.def;
				_this.fxcurr();
				
			})
		},
		rbind:function(){
			this.rfclick.click(function(){
				_this.def=_this.def--<=-(_this.clonum-1)?-(_this.clonum-1):_this.def;
				_this.fxcurr();
			})
		},

		init: function(obj) {
			
			_this=this;
			
			this.wrap = $(obj.wrap);

			this.speed = obj.speed || 1000;
			
			this.lfclick=$(obj.leftclick);
			
			this.rfclick=$(obj.rightclick);
			
			this.scrollele=$(obj.scrollele);
			
			this.curr = obj.curr || "curr";
			
			this.len=this.scrollele.children().length;
			
			this.slen=obj.slen||4;
			
			this.clonum=Math.ceil(this.len/this.slen);
			
			this.def=0;
			
			this.width = this.scrollele.children().eq(0).outerWidth(true);
			
			this.easing = obj.easing || null;
			
			this.lfclick.find("b").addClass("curr");
			
			if(this.clonum<2)
				this.rfclick.find("b").addClass("curr");
				
			this.lbind();
			this.rbind();
			
			
		}
	};
	win.scrollImg = scrollImg;
})(window, document, jQuery);

添加方法：

$(function(){
scrollImg.init({
	wrap:".scrollwrap",
	leftclick:".coll-left",
	rightclick:".coll-right",
	scrollele:".scrollwrap ul"
		});
	})

html页面

<div class="collection-list clearfix">
	<span class="coll-left"><b class="mico m-left"></b></span>
	<div class="scrollwrap">
		<ul>
			<li>
				<a href="#"><img src="images/pro.jpg" /></a>
				<p>￥151</p>
			</li>
			<li>
				<a href="#"><img src="images/pro.jpg" /></a>
				<p>￥152</p>
			</li>
	                          <li>
				<a href="#"><img src="images/pro.jpg" /></a>
				<p>￥152</p>
			</li>
			<li>
				<a href="#"><img src="images/pro.jpg" /></a>
				<p>￥152</p>
			</li>
	                          <li>
				<a href="#"><img src="images/pro.jpg" /></a>
				<p>￥152</p>
			</li>
		</ul>
	</div>
	<span class="coll-right textR"><b class="mico m-right"></b></span>
</div>