欢迎使用CSDN-markdown编辑器

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