jQuery的一个插件——d_imagechange

最新推荐文章于 2024-08-09 21:50:50 发布

DaveeChen

最新推荐文章于 2024-08-09 21:50:50 发布

阅读量164

点赞数

分类专栏： jQuery 文章标签： jQuery CSS Chrome 百度 IE ViewUI

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

备注：由于不能转载，以下代码是从网站copy过来的
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo-图片轮换-D.夏亦知非</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.d.imagechange.min.js"></script>
<style>
body{margin:0;padding:0px;}
.title{height:25px;line-height:25px;background-color:#000;color:#FFF;margin:10px 0;padding-left:20px;font-family:"Verdana","宋体";font-size:12px;}
</style>
<script>

// 需要你写的数据
var data = [
{title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.baidu.com',target:'_blank'},
{title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},
{title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}
];

$(document).ready(function(){
$('#pic1').d_imagechange({
data:data,
animateStyle:'o'//默认值'o',可以不写
});

$('#pic2').d_imagechange({
data:data,
animateStyle:'x'
});

$('#pic3').d_imagechange({
data:data,
animateStyle:'y'
});

$('#pic4').d_imagechange({
data:data,
animateStyle:'show'
});

$('#pic5').d_imagechange({
data:data,
animateStyle:'show-x'
});
$('#pic6').d_imagechange({
data:data,
animateStyle:'show-y'
});
$('#pic7').d_imagechange({
data:data,
animateStyle:'none'
});
});
</script>
</head>

<body>
<div class="title">Demo 1 默认效果:渐显 animateStyle:'o'</div>
<div id="pic1" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 2 横向滚动效果 animateStyle:'x'</div>
<div id="pic2" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 3 纵向滚动效果 animateStyle:'y'</div>
<div id="pic3" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 4 原地收缩伸展 animateStyle:'show'</div>
<div id="pic4" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 5 横向收缩伸展 animateStyle:'show-x'</div>
<div id="pic5" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 6 纵向收缩伸展 animateStyle:'show-y'</div>
<div id="pic6" style="width:300px;height:200px;margin-left:20px;">
</div>
<div class="title">Demo 7 无动画< animateStyle:'none'</div>
<div id="pic7" style="width:300px;height:200px;margin-left:20px;">
</div>

</body>

</html>

插件：
/********************************************************************************************************
* D-ImageChange
*----------------------------------------------------------------------------------------------------
* @Desc 图片轮换插件
*----------------------------------------------------------------------------------------------------
* @Author D.夏亦知非
* @Email DeclanZhang@gmail.com
* @QQ 29540200
* @Blog http://onblur.iteye.com
* @Date 2009-10-19
* @Version 1.1
* @JQueryVersion 1.3.2
*
* @update v1.1 增加清空原始内容功能,以免页面加载完成之前显示大片空白
* v1.2 修正IE6每次从服务器读取背景图片的BUG
**/

(function($){

jQuery.fn.extend({

d_imagechange:function(setting){

// 修正IE6每次从服务器读取背景图片的BUG
document.execCommand("BackgroundImageCache", false, true);

var config = $.extend({
bg:true, // 是否背景色
title:true, // 是否有标题
desc:true, // 是否有描述
btn:true, // 是否显示按钮
repeat:'no-repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'

bgColor:'#000', // 背景色
bgOpacity:.5, // 背景透明度
bgHeight:40, // 背景高

titleSize:14, // 标题文字大小
titleFont:'Verdana,宋体', // 标题文本字体
titleColor:'#FFF', // 标题文本颜色
titleTop:4, // 标题上边距
titleLeft:4, // 标题左边距

descSize:12, // 描述文字大小
descFont:'Verdana,宋体', // 描述文本字体
descColor:'#FFF', // 描述文本颜色
descTop:2, // 描述上边距
descLeft:4, // 描述左边距

btnColor:'#FFF', // 按钮颜色1
btnOpacity:.5, // 未选中按钮透明度
btnFont:'Verdana', // 按钮文本字体
btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制)
btnFontColor:'#000', // 按钮文本颜色
btnText:true, // 是否显示文本
btnWidth:15, // 按钮宽
btnHeight:15, // 按钮高
btnMargin:4, // 按钮间距
btnTop:4, // 按钮上边距

playTime:2000, // 轮换间隔时间,单位(毫秒)
animateTime:500, // 动画执行时间,单位(毫秒)
animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
width:300, // 宽, 不设定则从DOM读取
height:200 // 高, 不设定则从DOM读取

},setting);

return $(this).each(function(){
var _this = $(this);
var _w = config.width || _this.width(); // 宽
var _h = config.height || _this.height(); // 高
var _n = config.data.length; // 数目
var _i = 0; // 当前显示的item序号

_this.empty()
.css('overflow','hidden')
.width(_w)
.height(_h);

// 半透明背景
if(config.bg){
$('<div />').appendTo(_this)
.width(_w)
.height(config.bgHeight)
.css('background-color',config.bgColor)
.css('opacity',config.bgOpacity)
.css('position','absolute')
.css('marginTop',_h-config.bgHeight)
.css('zIndex',3333);
}

// 文字区
var _textArea =
$('<div />').appendTo(_this)
.width(_w)
.height(config.bgHeight)
.css('position','absolute')
.css('marginTop',_h-config.bgHeight)
.css('zIndex',6666);
// 按钮区
var _btnArea =
$('<div />').appendTo(_this)
.width(_w)
.height(config.bgHeight)
.css('position','absolute')
.css('marginTop',_h-config.bgHeight)
.css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n)
.css('zIndex',9999)
.css('display',config.btn?'block':'none');

// 插入空div修正IE的绝对定位BUG
$('<div />').appendTo(_this);

// 图片区
var _imgArea =
$('<div />').appendTo(_this)
.width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w)
.height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h);

// 初始化图片文字按钮
$.each(config.data,function(i,n){
$('<a />').appendTo(_imgArea)
.width(_w)
.height(_h)
.attr('href',n.href?n.href:'')
.attr('target',n.target?n.target:'')
.css('display','block')
.css('background-image','url('+n.src+')')
.css('background-repeat',config.repeat)
.css('display','block')
.css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');

if(config.title){
$('<b />').appendTo(_textArea)
.html(n.title?n.title:'')
.css('display',i==0?'block':'none')
.css('fontSize',config.titleSize)
.css('fontFamily',config.titleFont)
.css('color',config.titleColor)
.css('marginTop',config.titleTop)
.css('marginLeft',config.titleLeft);
}

if(config.desc){
$('<p />').appendTo(_textArea)
.html(n.desc?n.desc:'')
.css('display',i==0?'block':'none')
.css('fontSize',config.descSize)
.css('fontFamily',config.descFont)
.css('color',config.descColor)
.css('marginTop',config.descTop)
.css('marginLeft',config.descLeft);
}

$('<a />').appendTo(_btnArea)
.width(config.btnWidth)
.height(config.btnHeight)
.html(config.btnText?i+1:'')
.css('fontSize',config.btnFontSize)
.css('fontFamily',config.btnFont)
.css('textAlign','center')
.css('display','block')
.css('float','left')
.css('overflow','hidden')
.css('marginTop',config.btnTop)
.css('marginRight',config.btnMargin)
.css('background-color',config.btnColor)
.css('opacity',i==0?1:config.btnOpacity)
.css('color',config.btnFontColor)
.css('cursor','pointer')

});

// 保存所有元素集合的引用,方便在事件中使用
var _bs = _btnArea.children('a');
var _ts = _textArea.children('b');
var _ds = _textArea.children('p');
var _is = _imgArea.children('a');

// 针对不同的动画效果的附加设置, 主要是block的问题, 若在初始化时设置block:none会造成之后无block效果
if('o,show,none'.indexOf(config.animateStyle)!=-1){
_is.not(':first').hide();
_is.css('position','absolute');
}

// 添加按钮事件
_bs.click(function(){
var ii = _bs.index(this);
if(ii==_i){return;}

_ts.eq(_i).css('display','none');
_ts.eq(ii).css('display','block');
_ds.eq(_i).css('display','none');
_ds.eq(ii).css('display','block');
_bs.eq(_i).css('opacity',config.bgOpacity);
_bs.eq(ii).css('opacity',1)

switch(config.animateStyle){
case 'o' :
_is.eq(_i).fadeOut(config.animateTime);
_is.eq(ii).fadeIn(config.animateTime);
break;
case 'x' :
_imgArea.animate({marginLeft:-ii*_w},config.animateTime);
break;
case 'y' :
_imgArea.animate({marginTop:-ii*_h},config.animateTime);
break;
case 'show' :
case 'show-x' :
case 'show-y' :
_is.eq(_i).hide(config.animateTime);
_is.eq(ii).show(config.animateTime);
break;
case 'none' :
_is.eq(_i).hide();
_is.eq(ii).show();
break;
}
_i = ii;
});

// 添加轮换任务
var _play = setInterval(play,config.playTime);

function play(){
_bs.eq((_i+1)%_n).click()
}
// 鼠标进入事件
_this.mouseover(function(){
clearInterval(_play);
});

// 鼠标离开事件
_this.mouseout(function(){
_play = setInterval(play,config.playTime);
});
});
}
});

})(jQuery);

DaveeChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的一个插件——d_imagechange

备注：由于不能转载，以下代码是从网站copy过来的示例：Demo-图片轮换-D.夏亦知非body{margin:0;padding:0px;}.title{height:25px;line-height:25px;background-color:#000;color:#FFF;margin:10px 0;padding-left:20px;font-f...
复制链接

扫一扫

专栏目录