无间断向左滚动jquery代码（走马灯）

最新推荐文章于 2021-06-04 21:01:14 发布

wjh8222

最新推荐文章于 2021-06-04 21:01:14 发布

阅读量82

点赞数

分类专栏： web前端文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/wjh8222/article/details/84185550

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/*  
jquery向左滚动代码  
 
by ~Wang 
 
html: 
    <div id="scroll"> 
        <ul> 
            <li>[content]</li> //内容区必须为定宽,并且内容区域总宽大于等于#scroll
        </ul> 
    </div> 
css: 
    #scroll { width:500px; overflow:hidden; } //宽度自定，设置隐藏 
    #scroll ul { overflow:hidden; zoom:1; } //不定义宽度，清除浮动 
    #scroll ul li { float:left; } //浮动 
js: 
    $('#scroll').wScroll( 
        speed : 1, //速度，数值越大滚动越快 
        type : 0 //滚动类型，0连续，1间断 
    ); 
 */  
  
( function($) {  
    $.fn.wScroll = function(options) {  
        var defaults = { 
			speed : 1,
			type : 0  
		}  
        var options = $.extend(defaults, options);  
        //获取参数  
        var obj = $(this);  
        var obj_ul = $(obj).find('ul');
		var obj_li = $(obj_ul).find('li');
        //定义对象
		if (obj_li.outerWidth() * obj_li.length < obj.innerWidth()) return;
		//判断是否需要滚动	
        obj_li.clone().appendTo(obj_ul);
		obj_li = $(obj_ul).find('li');
		//复制内容，重建对象
        obj_ul.css('width', obj_li.outerWidth() * obj_li.length);  
        //设定宽度	
        var scroll_offset = options.speed;
		var	scroll_time = 10;   
        if (options.type == 1) {  
            scroll_offset = obj_li.outerWidth();  
            scroll_time = parseInt(5000/options.speed);  
        }
        //判断类型，设置滚动参数  
        var t = setInterval(scroll_do, scroll_time);  
        function scroll_do() {  
            if (obj.scrollLeft() >= obj_ul.outerWidth()/2 || obj.scrollLeft() >= (obj_ul.outerWidth() - obj.innerWidth())) {  
                obj.scrollLeft(0);  
                if (options.type == 1) {  
                    obj.animate({  
                            scrollLeft : obj.scrollLeft() + scroll_offset  
                    }, 1000);  
                }  
            } else {  
                if (options.type == 1) {  
                    obj.animate({  
                        scrollLeft : obj.scrollLeft() + scroll_offset  
                    }, 1000);  
                } else {  
                    obj.scrollLeft(obj.scrollLeft() + scroll_offset);   
                }     
            }  
        }  
        //滚动  
        obj_ul.hover(  
            function() { clearInterval(t); },  
            function() { t = setInterval(scroll_do, scroll_time); }  
        );  
        //鼠标悬停时间  
    }  
})(jQuery);