jQuery焦点图的制作

原理：定时器的使用

HTML结构：一个div里面三组ul分别用来表示图片、标题与数字

<div id="jdt">
     <ul id="imgList">
            <li><a href="#"><img src="images/01.jpg" /></a></li>
            <li><a href="#"><img src="images/02.jpg" /></a></li>
            <li><a href="#"><img src="images/03.jpg" /></a></li>
            <li><a href="#"><img src="images/04.jpg" /></a></li>
     </ul>
     <ul id="desc">
            <li><a href="#">十佳歌手开场震撼表扬</a></li>
            <li><a href="#">四进三选手对决</a></li>
            <li><a href="#">这里是标题3</a></li>
            <li><a href="#">这里是标题4</a></li>
     </ul>
     <div id="num">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
     </div>
</div>

CSS样式：

#jdt{ width:382px; height:290px;/* border:#666666 solid 8px;*/ background-color:#CCCCCC; overflow:hidden; position:relative; margin:100px auto;}
#jdt img{ width:382px; height:290px; border:0; }
#jdt li{ list-style-type:none;}
#desc{ position:absolute; bottom:0; left:0; height:30px; width:100%; background-color:#333333; overflow:hidden;filter:alpha(opacity=70);}
#desc li a{color:#FFFFFF; text-decoration:none; font-size:13px;}
#desc li{ line-height:30px; padding-left:15px;}
#num{ height:18px; width:80px; /*background:#FF0000;*/ position:absolute; bottom:5px; right:3px; text-align:right;}
#num li{ width:18px; height:18px; background-color:#000000; color:#FFFFFF; line-height:18px; float:left; display:inline;text-align:center; margin-left:2px; cursor:pointer; font-size:12px;}
#num .active{ background-color:#0099FF;}

 

 

jQuery代码如下：

<script type="text/javascript">
$(function(){
    var imgList = $("#imgList li");
    var biaoti = $("#desc li");
    var num = $("#num li");
    var jdt =$("#jdt");
    var count = imgList.length;
    var interval = 3000;
    var t;//定时器标识
    
    var index=0;
    /*
      这里是函数定义
      function fn(arg1){}
      var fn = function(arg1){}
    */
    var hideAll = function(){
        imgList.hide();
        biaoti.hide();
        num.removeClass("active");
    }
    
    var showItem = function(){
        hideAll();
             //console.info(index);
            $(imgList[index]).fadeIn();
            $(biaoti[index]).fadeIn();
            $(num[index]).addClass("active");
    };
    
    var next=function(){
             index=index+1;
             if(index==count)
             {
                index=0;
             }
             showItem();
        };
    
    
    t = setInterval(next,interval);//调用定时器，（next代表下一个，interval表示周期）
    jdt.bind("mouseover",function(){
        clearInterval(t);
    });
    jdt.bind("mouseout",function(){
        t = setInterval(next,interval);
    });
    num.each(function(i,n){
        $(n).bind("click",function(){
            index = i;
            showItem();
        });
    });
})
</script>

首先通过
var imgList = $("#imgList li");
var biaoti = $("#desc li");
var num = $("#num li");

获取图片、标题和数字。
并通过var count = imgList.length;
获取图片的个数。
通过var interval = 3000;定义定时器的间隔时间。
然后用t来代表定时器的标识。
并且通过var index=0;定义下标从0开始。

通过var hideAll = function(){
      imgList.hide();
      biaoti.hide();
      num.removeClass("active");
     }
来隐藏所有

通过var showItem = function(){
     hideAll();
       $(imgList[index]).fadeIn();
       $(biaoti[index]).fadeIn();
       $(num[index]).addClass("active");
     };
来显示当前，并给当前数字添加active类

通过var next=function(){
        index=index+1;
        if(index==count)
        {
        index=0;
        }
        showItem();
   };
来显示下一个
 t = setInterval(next,interval);调用定时器，每隔三秒显示下一张

通过以下代码块
     jdt.bind("mouseover",function(){
      clearInterval(t);
     });
     jdt.bind("mouseout",function(){
      t = setInterval(next,interval);
     });
     num.each(function(i,n){
          $(n).bind("click",function(){
           index = i;
           showItem();
          });
     });
来给jdt这个div绑定事件，当鼠标悬停之上时，清除定时器，当鼠标离开时开启定时器。
并对数字进行遍历，某一个数字被点击使其对应的下标就变成当前的。

最终结果如图：

通过结构的改变还可使其变成如下显示：

原理是一样的。（完）

源码下载：jQuery焦点图

源码下载：jQuery焦点图带缩略图