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；

预览效果