imgslideshow: 基于 jQuery 的图片幻灯片插件
Posted by Ross Wan on 十二月 11, 2008
现在，越来越多的网站首页，都以放置一个图片幻灯片来显示”头条”内容。于是，为了方便使用，制作了一个功能简单的图片幻灯片插件。
代码
(function($){
$.fn.extend({
'imgSlideShow': function(options){
// 扩展参数
var op = $.extend({
'itemclass': null,
'desclass': null,
'delay': 2000
}, options);
// 设置窗口的样式
this.css({
position: 'relative',
overflow: 'hidden'
});
// 设置图片项的样式
this.children('.' + op.itemclass).css({
clear: 'both',
display: 'none'
});
// 添加数字标签项窗口
$('<div id="imgslideshow_label0000"></div>').appendTo(this).css({
position: 'absolute',
bottom: '2px',
right: '2px',
width: '100%',
height: '22px',
'z-index': 10000,
overflow: 'hidden'
});
// 取得所有图片项
var items = $('.' + op.itemclass, this);
// 图片项的数目
var itemsLength = items.length;
// 当前的图片项索引
var curItemIndex = 0;
// 当前的 timeout 函数返回值
var timeoutReturn;
// 添加数字标签项
for(var i=itemsLength-1;i>=0;i--){
$('<div class="label0000" id="label0000' + i + '">' + (i + 1) + '</div>').appendTo('#imgslideshow_label0000').css({
float: 'right',
width: '20px',
height: '20px',
'line-height': '20px',
'text-align': 'center',
'font-weight': 'bold',
'background-color': '#EFEBD6',
'opacity': 0.8,
'border': '1px solid #000',
'cursor': 'pointer',
'margin-left': '2px'
// 标签项的单击事件
}).click(function(e){
// 停止当前的图片项动画并将其隐藏和设置回透明度为1
items.eq(curItemIndex).stop().hide().css({
opacity: 1
});
// 阻止事件流
e.stopPropagation();
// 暂停当前的 timeout 函数
clearTimeout(timeoutReturn);
// 设置标签项的样式
$('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
items.eq(curItemIndex).hide();
$('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
// 从当前的索引开始，重新开始图片动画
curItemIndex = parseInt($(this).text()) - 1;
imgSlideShowProcess();
});
}
// 图片动画执行函数
var imgSlideShowProcess = function(){
$('#label0000' + curItemIndex).css('background-color', '#FF8210');
items.eq(curItemIndex).fadeIn(300, function(){
timeoutReturn = setTimeout(imgFadeOut, op.delay);
});
};
// 淡出图片
var imgFadeOut = function(){
items.eq(curItemIndex).fadeOut(1, function(){
$('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
curItemIndex = (curItemIndex + 1) % itemsLength;
imgSlideShowProcess();
});
};
// 开始图片动画
imgSlideShowProcess();
return this;
}
});
})(jQuery);
使用示例
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-imgslideshow.js"></script>
<script type="text/javascript">
$(function(){
$('#container').imgSlideShow({itemclass: 'item', 'delay': 3000})
});
</script>
</head>
<body>
<div id="container">
<div class="item">
<img src="imgs/1.jpg"/>
</div>
<div class="item">
<img src="imgs/2.jpg"/>
</div>
<div class="item">
<img src="imgs/3.jpg"/>
</div>
<div class="item">
<img src="imgs/4.jpg"/>
</div>
<div class="item">
<img src="imgs/5.jpg"/>
</div>
</div>
</body>
</html>
可选参数 delay 是设置每幅图片的显示时间。
兼容性
支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+
This entry was posted on 十二月 11, 2008 在 3:30 下午 and is filed under Ajax, Javascript, jQuery. Tagged: images, jQuery, plugins, slide. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, 或 trackback from your own site.
jacksuc said
没有设置文字！ 设置上文字会更完美点！