jquery 插件 轻量级jquery焦点图 幻灯片效果 jquery.slider

ie真的让程序员爱不起，ie9又让我管理的站酷车中国焦点图悲剧了。就从网上找对搜索引擎友好，界面类似的焦点图。无耐网上的焦点图界面功能都很复杂，不符合的我的要求。只有自己动手了。

原理并不复杂，运用定时器setInterval定时执行，轮换显示内容罢了。jquery 又给我们定义好了淡入淡出动画效果，就下手吧

下面是全部代码

//轻量级jquery焦点图
//版权 酷车中国 www.kuchechina.com
//作者 逐月 zhuyue.cnblogs.com
//演示 http://www.kuchechina.com/ //调用方法
//$("slider").slider();
//$("slider").slider({width:300,height:250,txtHeight:25});
//调用参数
//width:300,--宽 默认宽度300
//height:250,--总高 默认高度 250
//txtHeight:25--文件链接高 默认高度25

jQuery.fn.slider = function(settings) {

settings = jQuery.extend({
width: 300,
height: 250,
txtHeight: 25
},
settings);
var css = {
dl:{
height:settings.height-settings.txtHeight,
width:settings.width,
padding:0,
margin:0,
position:"relative",
overflow:"hidden"
},
dd:{
position:"absolute",
width: "100%",
"list-style":"none",
top: "0px",
left: "0px",
padding:0,
margin:0,
overflow:"hidden"
},
dt:{
position:"absolute",
width: "100%",
"list-style":"none",
right: "0px",
bottom: "0px",
padding:0,
margin:0,
overflow:"hidden"
},
span:{
"text-align": "center",
"border-left": "#ffffff 1px solid",
width: "24px",
display: "block",
font: "10px Arial, Helvetica, sans-serif",
background:" #000000",
"float": "right",
height: "100%",
color: "#ffffff",
cursor: "pointer"
},
cur:{
background: "#ce0609",
color: "#ffffff",
filter: "Alpha(opacity=100)",
opacity: "1.0"
},
normal:{
filter: "Alpha(opacity=50)",
background: "#000000",
color: "#ffffff",
opacity: "0.5"
},
a:{
width: "100%",
display: "block",
height: "100%",
color: "#ffffff"
},
div:{
"text-align": "center",
width:settings.width,
height:settings.txtHeight,
"vertical-align":"middle",
"line-height":settings.txtHeight+"px",
overflow:"hidden"
}
};

var s = this;
var fs = 1;
var pics = s.children("dl").find("dd");
s.children("dl").css(css.dl);
pics.css(css.dd);
var nav =s.children("dl").append("<dt></dt>").find("dt");
nav.css(css.dt);
var sLink =s.append("<div></div>").find("div");
var navSite = pics.size();
pics.eq(fs -1).show().siblings("dd").hide();
sLink.css(css.div);
setTxt(fs);
for(var i = navSite;i >0 ;i--){
if(i == fs){
nav.append("<span class='cur'><a>"+i+"</a></span>");
}else{
nav.append("<span class='normal'><a>"+i+"</a></span>");
}
};
nav.children("span").css(css.span);
nav.children("span.cur").css(css.cur);
nav.children("span.normal").css(css.normal);
nav.children("span").find("a").css(css.a);
var myTime = setInterval(function(){
fs++;
if(fs>navSite){fs=1;}
show(fs);
} , 3000);

function show(i){
pics.eq(i - 1).stop(true,true).fadeIn(300).siblings("dd").fadeOut(300);
nav.children("span").eq(navSite - i).addClass("cur").removeClass("normal").siblings("span").removeClass("cur").addClass("normal");
nav.children("span.cur").css(css.cur);
nav.children("span.normal").css(css.normal);
setTxt(i);
};
nav.children("span").mousedown(function(){
fs =navSite - nav.find("span").index(this);
show(fs);
});
function setTxt(i){
var fsA = pics.eq(i - 1).find("a");
sLink.empty().append("<a href='"+fsA.attr("href")+"' title='"+fsA.attr("title")+"' target='_blank'>" + fsA.attr("title")+"</a>");
};
};

html页面代码

<div class="slider" style="width:300px; height:250px; overflow:hidden;">
<dl>
<dd>
<a title="高晓松醉驾判决生效 被判拘役6个月"  href="http://www.kuchechina.com/ReNews.aspx?Newsid=18163"
target="_blank">
<img alt="高晓松醉驾判决生效 被判拘役6个月" style="width: 300px; height: 250px;" src="http://www.kuchechina.com/userfiles/2011/6/129526902922500000272.jpg" />
</a>
</dd>
<dd>
<a title="醉驾入刑,法律岂是橡皮筋 " href="http://www.kuchechina.com/ReNews.aspx?Newsid=18861"
target="_blank">
<img alt="醉驾入刑,法律岂是橡皮筋 " style="width: 300px; height: 250px;" src="http://www.kuchechina.com/userfiles/2011/6/129526899054218750421.jpg" />
</a>
</dd>
<dd>
<a title="华丽转身 全新一代迈腾合众汇金到店实拍" href="http://www.kuchechina.com/renews.aspx?Newsid=19913"
target="_blank">
<img alt="华丽转身 全新一代迈腾合众汇金到店实拍" style="width: 300px; height: 250px;" src="http://www.kuchechina.com/ImgUpload/Flash_News/129555408097214118.jpg" />
</a>
</dd>
</dl>
</div>

调用方法

$(document).ready(function(){
// 在这里写你的代码...
$(".slider").slider();
});

简单参数调用方法

$(document).ready(function(){
// 在这里写你的代码...
$(".slider").slider({width:300,height:250,txtHeight:25});
});

使用建议：

1. HTML代码一定要按照给出的格式，外边框要定义宽高和使用样式overflow:hidden以免破坏我们的页面效果

<div class="slider" style="width:XXpx;height:xxpx;overflow:hidden;">
<dl>
<dd><a href="http://www.kuchechina.com/" title="酷车中国"><img src="" style="width:XXpx;height:xxpx;"/></a></dd>
<dl>
</div>

2. 不带参数调用默认是宽300px； 高250px; 文本高25px；

预览效果

// jQuery.fn.slider = function(settings) { settings = jQuery.extend({ width: 300, height: 250, txtHeight: 25 }, settings); var css = { dl: { height: settings.height - settings.txtHeight, width: settings.width, padding: 0, margin: 0, position: "relative", overflow: "hidden" }, dd: { position: "absolute", width: "100%", "list-style": "none", top: "0px", left: "0px", padding: 0, margin: 0, overflow: "hidden" }, dt: { position: "absolute", width: "100%", "list-style": "none", right: "0px", bottom: "0px", padding: 0, margin: 0, overflow: "hidden" }, span: { "text-align": "center", "border-left": "#ffffff 1px solid", width: "24px", display: "block", font: "10px Arial, Helvetica, sans-serif", background: " #000000", "float": "right", height: "100%", color: "#ffffff", cursor: "pointer" }, cur: { background: "#ce0609", color: "#ffffff", filter: "Alpha(opacity=100)", opacity: "1.0" }, normal: { filter: "Alpha(opacity=50)", background: "#000000", color: "#ffffff", opacity: "0.5" }, a: { width: "100%", display: "block", height: "100%", color: "#ffffff" }, div: { "text-align": "center", width: settings.width, height: settings.txtHeight, "vertical-align": "middle", "line-height": settings.txtHeight + "px", overflow: "hidden"} }; var s = this; var fs = 1; var pics = s.children("dl").find("dd"); s.children("dl").css(css.dl); pics.css(css.dd); var nav = s.children("dl").append("").find("dt"); nav.css(css.dt); var navSite = pics.size(); pics.eq(fs - 1).show().siblings("dd").hide(); if (settings.txtHeight > 0) { var sLink = s.append("").find("div"); sLink.css(css.div); setTxt(fs) } for (var i = navSite; i > 0; i--) { if (i == fs) { nav.append("" + i + "") } else { nav.append("" + i + "") } }; nav.children("span").css(css.span); nav.children("span.cur").css(css.cur); nav.children("span.normal").css(css.normal); nav.children("span").find("a").css(css.a); var myTime = setInterval(function() { fs++; if (fs > navSite) { fs = 1 } show(fs) }, 3000); function show(i) { pics.eq(i - 1).stop(true, true).fadeIn(300).siblings("dd").fadeOut(300); nav.children("span").eq(navSite - i).addClass("cur").removeClass("normal").siblings("span").removeClass("cur").addClass("normal"); nav.children("span.cur").css(css.cur); nav.children("span.normal").css(css.normal); if (settings.txtHeight > 0) { setTxt(i) } }; nav.children("span").mousedown(function() { fs = navSite - nav.find("span").index(this); show(fs); fs-- }); function setTxt(i) { var fsA = pics.eq(i - 1).find("a"); sLink.empty().append("" + fsA.attr("title") + "") } };

$(document).ready(function(){
// 在这里写你的代码...
$(".slider").slider({width:300,height:250,txtHeight:25});
});
// ]]>







代码打包下载