郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > jquery插件 >

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插件(点击滚动和自动滚动)http://www.51xuediannao.com/js/jquery/701.html

(责任编辑:懒人建站)

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

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