kongxiantao
- 浏览: 108260 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
墨子宇：
so,为了使用JSLint我还得装一个aptana？
eclipse 添加 JSLint 插件 -
lvjun106：
楼主可以看下这篇文章，介绍的很详细。http://www.os ...
eclipse 添加 JSLint 插件 -
newsletterBroker：
呵呵，感觉不错！
Jquery 源码中的 正则表达式 分析 -
jayliud：
String.prototype.count = funct ...
百度web前端笔试
插件原文地址：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_auto_mobilyslide.rar (493 KB)
- 下载次数: 136
分享到：
发表评论
-
支持ctrl，shift键的拖拽排序
2011-08-26 11:23 1131终于搞定了，太不容易了。最近公司要弄一个拖拽排序的 ... -
jquery plugin - pngFix 修改
2011-06-23 14:09 1086以前IE下png都用的是pngFix.js这个脚本来解决的，一 ... -
jquery plugin 集合
2011-06-22 22:01 1084jQuery插件-文件上传(File upload)A ... -
jquery 中的 mouseover ，mouseout 多次触发 解决办法
2011-06-14 18:07 2207这篇文章分析的不错：http://www.cnblogs ... -
jquery1.5 test 环境搭建
2011-02-21 18:35 8021.下载qunit:https://download.gith ... -
学习Jquery 源码 有一收获 DOM 加载 重新认识
2010-12-30 22:45 1708刚才看Jquery源码时，看见如下，一段不明白，上网一搜，豁然 ... -
jQuery 系统授权
2010-09-16 16:05 933前些天做了一个利用Jq ...
相关推荐
jquery图片无缝滚动插件上下左右图片无缝滚动代码
liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 Marquee 标签，但比 Marquee 更强大。它可以应用于任何 Web 元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、...
基于jQuery的图片左右无缝滚动插件
myslideLeftRight 基于jQuery图片左右无缝滚动插件,方便友情链接左右滚动。 思路： 点击左边-- 1.将第一个LI向左滑动，滑动的数值就是LI的宽度。（这里是用负margin-left来实现移动。） 2.滑动完成后，将...
jquery图片文字滚动插件多组图片文字间歇滚动
myslideLeftRight 基于jQuery图片左右无缝滚动插件.zip
imgscroll插件是一款支持图片焦点滚动（支持渐变和滚动），图片连续无缝循环滚动的js库，依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
亲测好用无错，有疑问的可以留言我会解答，请大家放心的来下载吧
jQuery焦点图片无缝滚动轮播插件.zip
一个无缝循环滚动插件，基于jQuery实现。。。
主要介绍了基于编写jQuery的无缝滚动插件实现代码,需要的朋友可以参考下
jquery上下左右图片无缝滚动代码是一款jquery图片无缝滚动插件。
基于Jquery的图片无缝滚动插件，需要的朋友可以参考下。
无缝图片滚动效果，基于IE6，好看使用的无缝图片滚动效果，基于IE6，好看使用的无缝图片滚动效果，基于IE6，好看使用的
强大的jQuery焦点图无缝滚动走马灯特效插件cxScroll，强大的jQuery插件，支持自定义方向滚动，左右滚动，上线滚动，参数为direction，还可以自定义动画方式、滚动步长、滚动速度、以及是否自动滚动、是否使用滚动...
jquery多功能插件支持无缝图片滚动,选项卡切换,焦点图片切换,点击弹出层等