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

jquery 图片 无缝 滚动 插件

 
阅读更多

插件原文地址:http://playground.mobily.pl/jquery/mobily-slider.html

 

简单的说这个图片滚动的效果和淘宝首页上的效果是一样的

 

插件源代码学习:

/* ==========================================================
 * MobilySlider
 * date: 20.1.2010
 * author: Marcin Dziewulski
 * last update: 02.02.2011
 * web: http://www.mobily.pl or http://playground.mobily.pl
 * email: hello@mobily.pl
 * Free to use under the MIT license.
 * ========================================================== */
 (function($) {
    $.fn.mobilyslider = function(options) {
        var defaults = {
			//容器的class
            content: ".sliderContent",
			//容器孩子的标签
            children: "div",
			//图片过度的方式有三种  水平向右滚动:horizontal,垂直向下:vertical,淡隐淡显: fade
            transition: "horizontal",
			//播放一张时的时间
            animationSpeed: 300,
			//是否自动滚动
            autoplay: false,
			//自动滚动的速度,也就说时间间隔,多长时间播放下一张
            autoplaySpeed: 3000,
			//鼠标悬停后停止滚动
            pauseOnHover: false,
			//是否显示分页
            bullets: true,
			//是否有左右箭头
            arrows: true,
			//未触发是是否显示箭头
            arrowsHide: true,
			//向按钮的样式
            prev: "prev",
			//向后按钮的样式
            next: "next",
			//每一个动画开始时要做的事
            animationStart: function() {},
			//每一个动画结束时要做的事
            animationComplete: function() {}
        };
        var sets = $.extend({},
        defaults, options);
        return this.each(function() {
			// $t = $('div.slider');
            var $t = $(this),
            item = $t.children(sets.content).children(sets.children),
			//图片个数
            l = item.length - 1,
			//图片宽度
            w = item.width(),
			//图片高度
            h = item.height(),
            step = 0,
            play,
            bullets,
            arrows,
            z,
            active,
            bullet,
			//处理一次图片过渡没有完成,而又多次触发事件
			loadOver = true;
            var slider = {
                init: function() {
					//初始化要显示的图片
                    slider.data();
					//是否显示分页按钮
                    if (sets.bullets) {
                        slider.bullets.create();
                    }
					//是否显示左右箭头
                    if (sets.arrows) {
                        slider.arrows.create();
                    }
					//是否自动播放
					console.log( sets.autoplay );
                    if (sets.autoplay) {
                        slider.autoplay();
                    }
					//注册事件
                    slider.triggers();
                },
                data: function() {
					//通过z-index值来显示层次关系,这个真实够巧妙的。
					//显示方式:水平向右滚动,垂直向下滚动
                    item.each(function(i) {
                        $(this).css("z-index", -(i - l))
                    });
					//过度方式:淡隐淡显
                    if (sets.transition == "fade") {
                        item.hide().eq(0).show()
                    }
                },
                zindex: {
                    prev: function() {
                        step == l ? item.eq(0).css("z-index", l + 3) : item.css("z-index", l + 1);
                        item.eq(step).css("z-index", l + 4).next(item).css("z-index", l + 2);
                    },
                    next: function() {
                        item.css("z-index", l + 1).eq(step).css("z-index", l + 3).prev(item).css("z-index", l + 2);
                    },
                    bullets: function() {
                        item.css("z-index", l + 1).eq(active).css("z-index", l + 2);
                        item.eq(step).css("z-index", l + 3);
                    },
                    trigger: function() {
                        if (z == 1) {
                            slider.zindex.next();
                        } else {
                            if (z == -1) {
                                slider.zindex.prev();
                            } else {
                                if (z == 0) {
                                    slider.zindex.bullets();
                                }
                            }
                        }
                    }
                },
                slide: {
                    left: function(sign) {
						loadOver = false;
						//动画变化前要执行的函数
                        sets.animationStart.call(this);						
						//这里把代码的就够变了一下,这样看着舒服多了
						item.eq(step)
						.animate({ left: sign + "=" + w },sets.animationSpeed,function(){
							loadOver = true;
							slider.zindex.trigger()
						})
						.animate({ left : 0 },sets.animationSpeed + 200,function() {
                            sets.animationComplete.call(this);
                        });
                    },
                    top: function(sign) {
						loadOver = false;
						//同上
                        sets.animationStart.call(this);					
												
                        item.eq(step)
						.animate({ top: sign + "=" + h},sets.animationSpeed,function() {
							loadOver = true;
                            slider.zindex.trigger();
                        })
						.animate({top: 0},sets.animationSpeed + 200,function() {
                            sets.animationComplete.call(this)
                        });
                    },
                    fade: function() {
						loadOver = false;	
                        sets.animationStart.call(this);
                        item.fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function() {
							loadOver = true;
                            sets.animationComplete.call(this)
                        })
                    }
                },
                animation: {
                    previous: function() {
                        step == 0 ? step = l: step--;
                        z = -1;
                        switch (sets.transition) {
                        case "horizontal":
                            slider.slide.left("-");
                            break;
                        case "vertical":
                            slider.slide.top("+");
                            break;
                        case "fade":
                            slider.slide.fade();
                            break
                        }
                    },
                    next: function() {
                        step == l ? step = 0: step++;
                        z = 1;
                        switch (sets.transition) {
                        case "horizontal":
                            slider.slide.left("+");
                            break;
                        case "vertical":
                            slider.slide.top("-");
                            break;
                        case "fade":
                            slider.slide.fade();
                            break
                        }
                    }
                },
                autoplay: function() {
                    play = setInterval(function() {
                        slider.animation.next();
                        if (sets.bullets) {
                            setTimeout(function() {
                                slider.bullets.update()
                            },
                            sets.animationSpeed + 300)
                        }
                    },
                    sets.autoplaySpeed );
                },
                pause: function() {
                    clearInterval(play);
                },
				//分页按钮
                bullets: {
                    create: function() {
                        $t.append($("<div />").addClass("sliderBullets"));
                        bullets = $t.find(".sliderBullets");
                        for (i = 0; i <= l; i++) {
                            bullets.append($("<a />").attr({
                                href: "#",
								//自定义属性
                                rel: i
                            }).text(i));
                        }
                    },
                    trigger: function() {
						//找到a
                        bullet = bullets.find("a");
						//第一个被激活添加激活样式
                        bullet.eq(0).addClass("active");
						//绑事件
                        bullet.click(function() {
							
							//判断上次图片过渡是否完成
							if(!loadOver){ return false; }
                            
							var b = $(this),
                            rel = b.attr("rel");
                            active = bullet.filter(".active").attr("rel");
                            step = rel;
							//sign = rel > active ? "+": "-";
							sign = rel > active ? "-": "+";
							
                            z = 0;
                            if ( !b.hasClass("active") ) {
                                switch (sets.transition) {
                                case "horizontal":
                                    slider.slide.left(sign);
                                    break;
                                case "vertical":
                                    slider.slide.top(sign);
                                    break;
                                case "fade":
                                    slider.slide.fade();
                                    break
                                }
                            }
                            bullet.removeClass("active");
                            b.addClass("active");
							//为啥返回false?
							//原因:事件处理函数为了防止默认的事件行为,就返回false,表示终止符,而返回true,则表示执行符。其它的函数另当别论。
                            return false
                        })
                    },
                    update: function() {
                        bullet.removeClass("active").eq(step).addClass("active")
                    }
                },
                arrows: {
                    create: function() {
                        $t.append($("<div />").addClass("sliderArrows"));
                        arrows = $t.find(".sliderArrows");
                        arrows.append($("<a />").attr("href", "#").addClass(sets.prev).text("Previous"));
                        arrows.append($("<a />").attr("href", "#").addClass(sets.next).text("Next"))
                    },
                    trigger: function() {
                        arrows.find("." + sets.prev).click(function() {
							//判断上次图片过度是否完成
							if(!loadOver){ return false; }
							
                            slider.animation.previous();
                            if (sets.bullets) {
                                slider.bullets.update()
                            }
                            return false
                        });
                        arrows.find("." + sets.next).click(function() {
							//判断上次图片过度是否完成
							if(!loadOver){ return false; }
							
                            slider.animation.next();
                            if (sets.bullets) {
                                slider.bullets.update()
                            }
                            return false
                        });
                        if (sets.arrowsHide) {
                            arrows.hide();
                            $t.hover(function() {
                                arrows.show()
                            },
                            function() {
                                arrows.hide()
                            })
                        }
                    }
                },
                triggers: function() {
                    //注册事件
					if (sets.arrows) {
                        slider.arrows.trigger();
                    }
                    if (sets.bullets) {
                        slider.bullets.trigger();
                    }
                    if (sets.pauseOnHover) {
                        $t.hover(function() {
                            slider.pause();
                        },
                        function() {
                            slider.autoplay();
                        })
                    }
                }
            };
            slider.init();
        })
    }
} (jQuery));

/*
 * @author decadeofsword@gmail.com
 * @time 2011-08-05
 * 修复bug:一次加载没有完成,而有点击了多次。导致图片过度不自然。
 *
 */

 

 

demo在附件中

分享到:
评论

相关推荐

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    6. **插件使用**:在实际项目中,开发者可能会使用已有的jQuery无缝滚动插件,比如`jQuery.scrollable`或`jQuery.Slide`等。这些插件通常提供丰富的配置选项和API,以满足不同需求。 在提供的文件名`texiao5488_...

    liMarquee – jQuery无缝滚动插件

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 Marquee 标签,但比 Marquee 更强大。它可以应用于任何 Web 元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、...

    query图片无缝滚动插件上下左右图片无缝滚动代码.zip

    接下来,我们可以选择一个合适的jQuery无缝滚动插件。由于提供的标签中没有具体的插件名称,这里假设我们使用的是一个通用的无缝滚动插件,它可能包含的核心代码结构如下: 1. 初始化插件: ```javascript $...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    **jQuery图片无缝滚动代码**是一种常见的网页动态效果,用于实现图片的自动循环播放,为用户提供更生动、交互性更强的浏览体验。这种技术通常应用于网站的轮播图、产品展示或者新闻更新等区域,能够有效地吸引用户的...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件,它具有丰富的视觉效果,能够实现图片的无缝连续循环滚动,不仅支持横向滚动,还支持纵向滚动,为网页增添动态...

    基于jQuery的图片左右无缝滚动插件

    **基于jQuery的图片左右无缝滚动插件** 在网页设计中,动态展示图片是常见的需求,而图片无缝滚动则能提供一种优雅的展示方式,增强用户体验。"基于jQuery的图片左右无缝滚动插件"就是用于实现这种效果的工具,它...

    myslideLeftRight 基于jQuery图片左右无缝滚动插件

    myslideLeftRight 基于jQuery图片左右无缝滚动插件,方便友情链接左右滚动。 思路:  点击左边--  1.将第一个LI向左滑动,滑动的数值就是LI的宽度。(这里是用负margin-left来实现移动。)  2.滑动完成后,将...

    jquery向上无缝滚动

    在网页设计中,动态效果常常能提升用户体验,其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动,给用户带来连贯且吸引人的视觉体验。在本文中,我们将深入...

    myslideLeftRight 基于jQuery图片左右无缝滚动插件.zip

    【myslideLeftRight基于jQuery图片左右无缝滚动插件】是一个常用的JavaScript组件,它利用jQuery库实现了图片在网页中左右平滑地无缝滚动效果。这个插件适用于网站的轮播图、产品展示等场景,能够为用户提供流畅且...

    无缝循环滚动插件

    - `js`:JavaScript代码通常放在这里,可能包含jQuery库以及无缝循环滚动插件的源代码。 - `css`:CSS样式表,用于定义元素的外观和布局,以及滚动动画的样式。 通过分析这些文件,我们可以了解插件的工作原理,并...

    jQuery无缝滚动

    **jQuery无缝滚动插件详解** 在网页设计中,为了提供更好的用户体验,许多开发者选择使用jQuery无缝滚动效果。这种效果能够使页面内容以平滑、连续的方式展现,为用户带来无中断的浏览体验。jQuery,一个强大的...

    jQuery焦点图片无缝滚动轮播插件.zip

    jQuery焦点图片无缝滚动轮播插件是Web开发中常见的组件,它主要用于网站的首页或产品展示区域,以吸引用户注意力并提升用户体验。该插件基于JavaScript库jQuery构建,旨在实现图片的自动滚动和手动切换,形成一种无...

    jquery图片文字滚动插件多组图片文字间歇滚动

    本教程将详细讲解如何利用jQuery实现一个图片与文字的多组间歇滚动插件。 首先,我们需要理解jQuery的核心概念。jQuery提供了一套简洁的API,使得开发者能够更方便地操作DOM(Document Object Model)。例如,`$...

    web-JQuery无缝图片滚动

    **jQuery无缝图片滚动**是一种常见的网页动态效果,用于在网页上展示一组图片,通过自动循环滚动,给予用户连续且平滑的视觉体验。这个技术基于JavaScript库jQuery,它简化了DOM操作,使得实现复杂的交互变得更加...

    jQuery 多功能无缝滚动插件

    **jQuery 多功能无缝滚动插件** 在网页设计中,为了增强用户体验,有时我们需要实现一些动态效果,如图片轮播、新闻滚动等。jQuery 多功能无缝滚动插件就是为了解决这类问题而诞生的。它能帮助开发者轻松创建出各种...

    jquery无缝滚动

    为了方便开发,有许多预封装的jQuery无缝滚动插件可供使用,例如`jQuery.scrollable`、`jQuery.Marquee`等。这些插件通常提供了更多的自定义选项和事件处理功能,例如鼠标悬停暂停、导航点控制等。 ### 图片轮播与...

    jQuery滚动插件

    **jQuery滚动插件详解** jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库,它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能,极大地提升了用户体验。在网页设计中,滚动效果是一个重要的...

Global site tag (gtag.js) - Google Analytics