效果预览:

 带左右箭头的自动焦点图：

html:

     
                                                
      
                    
       
                        
        
                        
        
                        
        
                    
       
                    
       
                        
        
                        
        
                        
        
                    
       
                    
       
内容1~
                
      
     

css：

body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }        em { font-style:normal; }        li { list-style:none; }        a { text-decoration:none; }        img { border:none; vertical-align:top; }        table { border-collapse:collapse; }        input,textarea { outline:none; }        textarea { resize:none; overflow:auto; }        body { font-size:12px; font-family:"微软雅黑"; }                .recommend .pic { width:294px; height:168px; padding:12px 12px 0; background:#f8f8f8; position:relative; margin:0 auto; border-radius:6px; }        .recommend .pic ul { width:223px; height:133px; position:absolute; top:12px; left:12px; }        .recommend .pic ul li { width:223px; height:133px; border:1px solid #fff; position:absolute; top:0; left:0; }        .recommend .pic ul img { width:223px; height:133px; }        .recommend .pic ol { position:absolute; top:12px; right:12px; }        .recommend .pic ol li,.recommend .pic ol img { width:54px; height:30px; }        .recommend .pic ol li { border:3px solid #fff; margin-bottom:13px; }        .recommend .pic ol .active { border:3px solid #d6191d; }        .recommend .pic p { line-height:32px; position:absolute; left:12px; bottom:0px; }                .recommend .list { padding:18px 26px 0; }        .recommend .list li { height:27px; vertical-align:middle; }        .recommend .list em { float:left; color:#dfdfdf; margin-right:7px; }        .recommend .list em img { margin-right:3px; }        .recommend .list a { float:left; color:#454545; }        .recommend .list a:hover { text-decoration:underline; }        .recommend .list span { float:right; font-family:arial; font-size:12px; color:#999; }

js：

// 自动播放的焦点图    (function (){        var oDiv = $('#fade');        var aUlLi = oDiv.find('ul li');        var aOlLi = oDiv.find('ol li');        var oP = oDiv.find('p');        var arr = [ '内容1~', '内容2', '内容3' ];        var iNow = 0;        var timer = null;                fnFade();                aOlLi.click(function (){            iNow = $(this).index();            fnFade();        });        oDiv.hover(function (){ clearInterval(timer); }, autoPlay);                function autoPlay() {            timer = setInterval(function () {                iNow++;                iNow%=arr.length;                fnFade();            }, 2000);        }        autoPlay();                function fnFade() {            aUlLi.each(function (i){                if ( i != iNow ) {                    aUlLi.eq(i).fadeOut().css('zIndex', 1);                    aOlLi.eq(i).removeClass('active');                } else {                    aUlLi.eq(i).fadeIn().css('zIndex', 2);                    aOlLi.eq(i).addClass('active');                }            });            oP.text(arr[iNow]);        }    })();