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；
预览效果
