知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    js图片左右滚动的jquery插件(点击滚动和自动滚动)

    作者:佳明妈 来源:atued.com 2013-07-10 人气:
    js图片左右滚动的jquery插件可以点击滚动也可以配置成自动滚动,atued的 三藏 法师 原创,懒人建站整理发布

    原创作者:atued 的 三藏 法师

    js图片左右滚动的jquery插件可以点击滚动也可以配置成自动滚动,由atued 的 三藏 法师 原创,懒人建站整理发布。

    完整代码请点击上面的代码演示,或者把代码演示里面的代码复制出去即可。
    jquery插件代码如下:
    /*
     * 左右滚动插件 Bate V 0.01
     * 作者:三藏
     * 作者网站:atued http://www.atued.com/
     * 日期: 2013-07-10
    */
    (function($){
        /*左右滚动*/
        var defaults={
            cont:'',
            prev:'.prev',
            next:'.next',
            time:1000,//滚动时间
            distance: null, //滚动距离
            auto: false,
            autoDelay:"3000"
        };

        $.fn.slider=function(options){
            var o= $.extend({},defaults,options||{}),self=this;
            var jqCont=$(o.cont,self);
            var jqContWidth=jqCont.width();
            var dist= 0,maxDist=jqContWidth- o.distance;
            
            var setInt;             //自动滚动定时器变量
            clearInterval(setInt);  //先清理一次
            
            //向前滚动
            $(o.prev,self).bind('click',function(){
                if(dist>=0)return;
                dist+= o.distance;
                if(dist>=0)dist=0;
                jqCont.stop().animate({left:dist}, o.time);
            });
            //向后滚动
            $(o.next,self).bind('click',function(){
                if(Math.abs(dist)>=maxDist)return;
                dist+= -o.distance;
                if(Math.abs(dist)>=jqContWidth)dist=-maxDist;
                jqCont.stop().animate({left:dist}, o.time);
            });
            
            //自动滚动
            self.bind({
                'mouseenter': function() {
                    clearInterval(setInt);  
                },
                'mouseleave':function(){
                    setInt = setInterval(function () {
                        $(o.next, self).trigger("click");
                    },o.autoDelay);
                }    
            });
            if (o.auto) {
              self.trigger("mouseleave");
            }
            
        };

    })(jQuery);

    //滚动
    $('#lcrboxslide').slider({
        cont: '.overview',
        prev: '.lcr_l',
        next: '.lcr_r',
        distance: 792,
        time: 1500,
        auto: true
    });
    </script>
    <!--DEMO 结束-->

    ↓ 查看全文

    js图片左右滚动的jquery插件(点击滚动和自动滚动)由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    js图片左右滚动的jquery插件(点击滚动和自动滚动)-最新评论