<div class="recommend">

                <div class="pic" id="fade">

                    <ul>

                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li>

                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li>

                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li>

                    </ul>

                    <ol>

                        <li class="active"><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li>

                        <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li>

                        <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li>

                    </ol>

                    <p>内容1~</p>

                </div>

        body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:; padding:; }

        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 ; background:#f8f8f8; position:relative; margin: 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:; left:; }

        .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 ; }

        .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:#; }

        .recommend .list a:hover { text-decoration:underline; }

        .recommend .list span { float:right; font-family:arial; font-size:12px; color:#; }

    // 自动播放的焦点图

    (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 = ;

        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();

            }, );

        }

        autoPlay();

        function fnFade() {

            aUlLi.each(function (i){

                if ( i != iNow ) {

                    aUlLi.eq(i).fadeOut().css('zIndex', );

                    aOlLi.eq(i).removeClass('active');

                } else {

                    aUlLi.eq(i).fadeIn().css('zIndex', );

                    aOlLi.eq(i).addClass('active');

                }

            });

            oP.text(arr[iNow]);

        }

    })();