`
wjh8222
  • 浏览: 5779 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

无间断向左滚动jquery代码(走马灯)

阅读更多

/*  
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);  
 
分享到:
评论

相关推荐

    JS不间断向左滚动无缝隙

    JS不间断向左滚动javascript无缝隙

    jQuery图片左右滚动效果代码.zip

    5. **左右箭头功能**:左右箭头分别控制图片向左和向右滚动。在jQuery中,我们可以为每个箭头添加事件监听器,并根据当前显示的图片索引决定下一张图片的位置。 6. **兼容性**:考虑到不同的浏览器可能对CSS和...

    jquery 文字由左向右滚动 走马灯

    现在,我们可以编写jQuery代码来实现滚动效果。一种常见的方法是使用`animate()`函数来改变文本容器的`margin-left`属性,模拟文本的滚动: ```javascript $(document).ready(function() { var marqueeSpeed = 50;...

    图片不间断向左滚动,js图片向左不间断滚动

    在网页设计中,图片不间断向左滚动是一种常见的动态效果,常用于展示轮播图或产品展示区域,可以吸引用户注意力并提升用户体验。这种效果通常通过JavaScript实现,因为JavaScript具有强大的DOM操作能力,能够实时...

    jQuery 图片向左滚动代码

    本篇文章将详细讲解如何利用jQuery实现图片向左滚动的效果,这个功能常见于网站的轮播图或者展示区,能够吸引用户注意力并提供动态的视觉体验。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如$("#id")...

    html javascript jquery 走马灯例子

    另一个脚本文件`JqZmd.js`则包含了实现走马灯逻辑的代码。这个文件可能会包含以下内容: 1. **选择器**:jQuery的 `$()` 函数用于选取DOM元素,例如 `$("#slider")` 选取ID为“slider”的元素。 2. **事件绑定**:`...

    强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll

    强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll,强大的jQuery插件,支持自定义方向滚动,左右滚动,上线滚动,参数为direction,还可以自定义动画方式、滚动步长、滚动速度、以及是否自动滚动、是否使用滚动...

    jQuery,图片走马灯,向上滚动

    总结一下,这个简单的jQuery图片向上滚动效果利用了jQuery库的动画功能,通过定时更换显示的图片实现了走马灯效果。对于初学者来说,这是一个很好的实践项目,可以帮助理解jQuery的基本用法和动态效果的实现。同时,...

    jQuery网站新闻公告自动左右滚动切换代码

    同时,可以设置定时器实现自动滚动效果,如每隔一段时间自动向左或向右滚动一个公告项。 为了使效果更佳,代码可能还包含了一些优化措施,比如防止滚动过快导致的用户体验不佳,或者在达到最后一项时自动切换回第一...

    简单的走马灯效果(停顿/无缝滚动)

    接下来,为了让走马灯具有停顿和无缝滚动的效果,我们需要借助JavaScript(JS)或者jQuery这样的库。JavaScript可以监听用户事件(如鼠标悬停)来暂停走马灯,也可以设置定时器实现自动切换。以下是一个简单的JS示例...

    jquery文字左右和上下走马灯显示

    标题中的“jquery文字左右和上下走马灯显示”是指使用jQuery库实现的一种动态效果,它能使文字在页面上像走马灯一样从左向右、从右向左、从上到下或从下到上滚动展示。这种效果常用于网站的公告栏、新闻更新或者广告...

    jQuery 文字滚动(走马灯)插件

    jQuery 新闻文字滚动插件,和走马灯非常相似,可以横向滚动、竖向滚动、自定义滚动速度、区域大小,每一种滚动效果都有代码示例,你甚至可以把它作为一个jQuery教程,新闻滚动在我们平时的应用中很广泛,因此本插件...

    jQuery箭头控制图文左右滚动代码

    在本文中,我们将深入探讨如何使用jQuery和CSS来实现箭头控制的图文左右滚动效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。结合CSS,我们可以创建出动态且用户友好的网页...

    JQuery图片向左滚动示例

    本示例主要讲解如何利用JQuery实现图片向左滚动的效果,适用于创建轮播图、滚动广告等场景。 首先,我们需要理解JQuery的基本用法。JQuery通过选择器选取DOM元素,然后对这些元素进行操作。例如,`$("#myDiv")`会...

    jquery向左向右无缝滚动

    **jQuery向左向右无缝滚动实现详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。其中,图片的向左向右无缝滚动是一种常见的动态展示方式,尤其适用于展示产品系列或新闻更新等场景。本文将详细...

    jquery走马灯轮换效果(亲测无错好用)

    标题中的“jquery走马灯轮换效果”是指在网页中使用jQuery库实现的一种动态展示内容的特效,通常用于图片轮播、广告展示等场景。走马灯(Carousel)是一种常见的用户体验设计元素,它允许用户通过点击或自动滚动来...

    jquery文字向左无缝隙滚动

    **jQuery文字向左无缝隙滚动实现详解** 在网页设计中,跑马灯效果是一种常见的动态展示文本的方式,它能够吸引用户的注意力,使信息传递更为生动。"jQuery文字向左无缝隙滚动"是一种利用jQuery库实现的滚动效果,...

    无缝左右滚动的jquery特效

    这种特效利用JavaScript库jQuery的高效性能,结合CSS样式和HTML结构,实现了内容在水平方向上的无断点循环滚动。 在描述中提到的"演示地址 http://www.whkge.com/jsview/design20110830a/"是一个实际应用案例,可以...

    jQuery图片左右无缝滚动特效代码

    在这个"jQuery图片左右无缝滚动特效代码"中,我们可以期待以下关键知识点: 1. **jQuery库**:jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个特效利用了jQuery提供的...

Global site tag (gtag.js) - Google Analytics