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

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

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

下面是全部代码

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

jQuery.fn.slider = function(settings) {   
            
            settings = jQuery.extend({
                 300,
                height: 250,
                txtHeight: 25
            },
            settings);
           var css = {
            dl:{
                height:settings.height-settings.txtHeight,
                settings.width,
                padding:0, 
                margin:0,
                position:"relative",
                overflow:"hidden"
            },
            dd:{
                position:"absolute",
                 "100%",
                "list-style":"none",
                top: "0px",
                left: "0px",
                padding:0, 
                margin:0,
                overflow:"hidden"
            },
            dt:{
                position:"absolute",
                 "100%",
                "list-style":"none",
                right: "0px",
                bottom: "0px",
                padding:0, 
                margin:0,
                overflow:"hidden" 
            },
            span:{
                "text-align": "center",
                "border-left": "#ffffff 1px solid",
                 "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:{
                 "100%",
                display: "block",
                height: "100%",
                color: "#ffffff"
            },
            div:{
                "text-align": "center",
                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="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=" 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=" 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=" 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({300,height:250,txtHeight:25});
        });

 使用建议：

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

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

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

预览效果

代码打包下载