jQuery幻灯片插件
2011-12-11 16:38 二军 阅读(1045) 评论(0) 编辑 收藏 举报学了几个星期的jq了，，这几天写了个幻灯片插件。。有兴趣的朋友可以看看。。。http://www.shenmimi.com/blog/?p=19
希望大家多多支持我这个菜鸟呀！有什么意见或BUG请给我留言！
避免广告嫌疑，代码如下：欢迎讨论！希望多提优化建议！
(function($) {
$.fn.extend({
"huandeng": function(options) {
options = $.extend({ //默认参数
sudu: 3000,
//图片切换速度
yangshi: 1,
//样式
qsudu: 1000,
//图片显示速度
hsudu: 1000,
//图片消失速度
nav: 1,
//导航显示方式
dingshi: true,
//是否自动播放
tit: true,
//是否显示标题
hover: true //悬停是否暂停
},
options)
var $tu = this;
var len = $tu.find("a").length; //取得图片总数
var adTimer; //定时器
var $sudu = options.sudu; //引用参数速度
var $yangshi = options.yangshi; //引用参数样式
var $qsudu = options.qsudu; //引用参数图片显示速度
var $hsudu = options.hsudu; //引用参数图片消失速度
var $tit = options.tit; //标题
var $dingshi = options.dingshi; //是否自动播放
var $nav = options.nav;
var index = 0; //当前索引
var num = 0;
$dingshi == true ? $($tu).hover(function() {
options.hover == true ? clearInterval(adTimer) : {}; //停止计时
},
function() {
adTimer = setInterval(function() { //设置计时器
if ($tu.find("a").is(":animated")) {
return false;
}
index++; //索引累加
index == 0 ? num = len - 1: num = index - 1;
if (index == len) {
index = 0;
} //如果索引等于总索引，归0
showImg(index); //调用函数处理索引
},
$sudu) //秒间隔
}).trigger("mouseleave") //立即调用事件
: {};
if ($tit == true) {
$tu.append("<h1></h1>"); //插入标题
$tu.find("h1").text($tu.find("img").first().attr("alt"));
}
if ($nav == 1) {
$tu.append("<ol></ol>"); //创建并插入ol节点
if ($tu.find("ol")) {
for (var i = 1; i < len + 1; i++) {
$($tu.find("ol")).append("<li>" + i + "</li>"); //循环插入li节点
}
}
$($tu.find("ol li")).first().addClass("bg"); //给第一个数字加类
$($tu.find("ol li")).click(function() { //数字单击事件
if ($tu.find("a").is(":animated")) {
return false;
}
num = index; //上一次事件
index = $(this).index(); //索引等于当前索引
showImg(index); //调用函数处理
})
}
if ($nav == 2) {
$tu.before("<img src='img/prev.png' alt='' id='prve'>").after("<img src='img/next.png' alt='' id='next'>");
//index=0;
$("#next").click(function() {
if ($tu.find("a").is(":animated")) {
return false;
}
index++; //索引累加
index == 0 ? num = len - 1: num = index - 1;
if (index == len) {
index = 0;
} //如果索引等于总索引，归0
showImg(index); //调用函数处理索引
})
$("#prve").click(function() {
if ($tu.find("a").is(":animated")) {
return false;
}
index--; //索引累-
if (index == - 1) {
index = len - 1;
} //如果索引等于总索引，归0
index == len - 1 ? num = 0: num = index + 1;
showImg(index); //调用函数处理索引
})
}
if ($nav == 3) {
$tu.append("<ol></ol>"); //创建并插入ol节点
if ($tu.find("ol")) {
for (var i = 1; i < len + 1; i++) {
var $xiaotu = $tu.find("img:eq(" + i + ")").attr("src");
$($tu.find("ol")).append("<li><img src='" + $xiaotu + "' width='50' height='50'></li>"); //循环插入li节点
}
}
$($tu.find("ol li")).first().addClass("bg"); //给第一个数字加类
$($tu.find("ol li")).click(function() { //数字单击事件
if ($tu.find("a").is(":animated")) {
return false;
}
num = index; //上一次事件
index = $(this).index(); //索引等于当前索引
showImg(index); //调用函数处理
})
}
function showImg(index) { //处理图像函数
if ($tu.find("a").is(":animated")) {
return false;
}
//$(".cs").text("上一个"+num+"+当前"+index)
if (num == index) {
return false;
}
var $dh = $tu.find("a").eq(index); //当前动画
var $qdh = $tu.find("a").eq(num); //前动画
switch ($yangshi) {
case 0:
$tit == true ? tit($dh) : {};
$dh.show(num > index ? 0: $qsudu, function() {
$qdh.hide($hsudu);
})
break;
case 1:
$tit == true ? tit($dh) : {};
$dh.fadeIn($qsudu) //当前元素索引显示
.siblings("a").fadeOut($hsudu); //其他元素隐藏
break;
case 2:
$tit == true ? tit($dh) : {};
$hsudu > $qsudu ? $qsudu = $hsudu: {};
var $width = $tu.width();
$dh.css({
display: "inline",
left: num > index ? $width + "px": "-" + $width + "px"
});
$qdh.animate({
left: num > index ? "-" + $width + "px": $width + "px"
},
$qsudu, function() {
$(this).css({
display: "none"
})
});
$dh.animate({
left: "0px"
},
$hsudu);
break;
case 3:
$tit == true ? tit($dh) : {};
$hsudu > $qsudu ? $qsudu = $hsudu: {};
var $height = $tu.height();
$dh.css({
display: "inline",
top: num > index ? $height + "px": "-" + $height + "px"
});
$qdh.animate({
top: num > index ? "-" + $height + "px": $height + "px"
},
$qsudu, function() {
$(this).css({
display: "none"
})
});
$dh.animate({
top: "0px"
},
$hsudu);
break;
}
$($tu.find("ol li")).eq(index).click(function() {
return false;
}).addClass("bg") //当前数字加类
.siblings("li").removeClass("bg"); //其他数字去掉
}
function tit(tit) {
$tu.find("h1").text(tit.find("img").attr("alt"));
}
}
})
})(jQuery);
