scrollimg.js

来源：互联网发布：战狼2 知乎豆瓣编辑：程序博客网时间：2024/06/05 12:00

引用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>

0 0