Edit in JSFiddle

Result
HTML
CSS
JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带进度条(时间轴)的焦点图切换特效(jQuery) - whidy rebuild</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="mainSlider">
    <div id="big_frame" class="frame">
      <ul id="big_list" class="list">
          <li><a href="http://www.whidy.net"><img width="450" height="300" src="http://www.whidy.net/demos/timeLineSlider/1.jpg" /></a></li>
        <li><a href="http://www.whidy.net"><img width="450" height="300" src="http://www.whidy.net/demos/timeLineSlider/2.jpg" /></a></li>
        <li><a href="http://www.whidy.net"><img width="450" height="300" src="http://www.whidy.net/demos/timeLineSlider/3.jpg" /></a></li>
        <li><a href="http://www.whidy.net"><img width="450" height="300" src="http://www.whidy.net/demos/timeLineSlider/4.jpg" /></a></li>
        <li><a href="http://www.whidy.net"><img width="450" height="300" src="http://www.whidy.net/demos/timeLineSlider/5.jpg" /></a></li>
      </ul>
    </div>
    <div id="small_frame" class="l_frame">
      <ul id="small_list" class="list">
        <li class="cur"><h3>1w</h3><div class="bar"></div></li>
        <li><h3>22h</h3><div></div></li>
        <li><h3>333i</h3><div></div></li>
        <li><h3>4444d</h3><div></div></li>
        <li><h3>55555y</h3><div></div></li>
      </ul>
    </div>
</div>
</body>
</html>

.mainSlider { width:450px; height:325px;border:1px solid #ccc;margin:20px auto;}
.frame {width: 450px;height: 300px;overflow: hidden;}
.frame .list {list-style: none;padding: 0;margin: 0;width: 10000px;}
.frame .list li {width: 450px;height: 300px;float: left;}
.frame #big_list2 {height: 10000px;}
.frame #big_list2 li {clear: both;}
.frame #big_list4 {height: 10000px;}
.frame #big_list4 li {clear: both;}
.l_frame {width: 450px;height:25px;overflow: hidden;float: left;}
.l_frame .list {list-style: none;padding: 0;margin: 0;width: 10000px;}
.l_frame .list li {background-color: #eee;float: left;width: 90px;height:20px;cursor: pointer;}
.l_frame .list .cur {background-color: #3c9ed6;}
#small_list h3 {line-height:20px;height:20px;font-size:12px;margin:0;font-weight:normal;}
#small_list .cur .bar {width:0;height:5px;background-color:#C00;}

//初始化
function C_slider(frame,list,Lframe,Llist,forwardEle,backEle,scrollType,LscrollType,acitonType,autoInterval){
    this.frame = frame;
    this.list = list;
    this.Lframe = Lframe;
    this.Llist = Llist;
    this.forwardEle = forwardEle;
    this.backEle = backEle;
    this.scrollType = scrollType;
    this.LscrollType = LscrollType;
    this.acitonType = acitonType;
    this.autoInterval = autoInterval;
    
    this.slideLength = $("#"+this.Llist+" > li").length;//总的slider数量
    this.currentSlide = 0;
    this.FrameHeight = $("#"+this.frame).height();
    this.FrameWidth = $("#"+this.frame).width();
    this.lFrameHeight = $("#"+this.Lframe).height();
    this.lFrameWidth = $("#"+this.Lframe).width();
    this.lListHeight = $("#"+this.Llist+" >li").eq(0).outerHeight(true);
    this.lListWidth = $("#"+this.Llist+" >li").eq(0).outerWidth(true);
    
    var self = this;
    for(var i = 0; i<this.slideLength; i++) {
        $("#"+this.Llist+" > li").eq(i).data("index",i);
        $("#"+this.Llist+" > li").eq(i).bind(this.acitonType,function(){
            self.go($(this).data("index"));
            //alert("gfhgf");
        clearTimeout(self.autoExt);
        var bar = $(".bar");
        bar.stop(true).animate({width: "0"}, 50 );
        });
    };
    
    
    //定论鼠标划过时，自动轮换的处理
    $("#"+this.frame+",#"+this.Lframe).bind('mouseover',function(){
        clearTimeout(self.autoExt);
        var bar = $(".bar");
        bar.queue(function () {
        var _this = $(this);
        _this.dequeue();
        _this.clearQueue();        
        _this.stop();
        });
    });
    
    $("#"+this.frame+",#"+this.Lframe).bind('mouseout',function(){
        var bar = $(".bar");
        bar.animate({width: "90px"}, 2000 );
        bar.dequeue();
        clearTimeout(self.autoExt);
        self.autoExt = setTimeout(function(){
            self.extInterval();
        },self.autoInterval);
    });    
    
    //定论鼠标点击时，自动轮换的处理
    
    //开始自动轮换
    this.autoExt = setTimeout(function(){
        self.extInterval();
    },this.autoInterval);
}
//执行运动
C_slider.prototype.go = function(index){
    this.currentSlide = index;
    if (this.scrollType == "left"){
        $("#"+this.list).animate({
            marginLeft: (-index*this.FrameWidth)+"px"
        }, {duration:600,queue:false});         
    } else if (this.scrollType == "top"){
        $("#"+this.list).animate({
            marginTop: (-index*this.FrameHeight)+"px"
        }, {duration:600,queue:false});         
    }
    
    $("#"+this.Llist+" > li").removeClass("cur");
    $("#"+this.Llist+" > li").eq(index).addClass("cur");
    $("#"+this.Llist+" > li"+" > div").removeClass("bar");
    $("#"+this.Llist+" > li"+" > div").eq(index).addClass("bar");
    $("#"+this.Llist+" > li"+" > div").eq(index).animate({width: "90px"}, 2000 );
    $("#"+this.Llist+" > li"+" > div").not(".bar").css("width","0");

}
//自动执行
C_slider.prototype.extInterval = function(){
    if(this.currentSlide<this.slideLength-1){
        this.currentSlide += 1;
        this.go(this.currentSlide);
    }else {
        this.currentSlide = 0;
        this.go(0);
    }
    
    var self = this;
    this.autoExt = setTimeout(function(){
        self.extInterval();
    },this.autoInterval);

}

//实例化对象 
var goSlide1 = new C_slider("big_frame","big_list","small_frame","small_list","forward","back","left","left","click",2000);
    $(".bar").eq(0).animate({width: "90px"}, 2000 );