部分内容 自动轮播

用于一整块非仅仅图片 轮播

html：

 <div id="banner">  
                            <div id="banner_bg">       
                            </div>
                        <!--标题背景-->
                            <div id="banner_info"> 
                            </div>
                        <!--标题-->
                            <ul>   
                                <li class="on">
                                    1
                                </li>
                                <li>
                                    2
                                </li>
                                <li>
                                    3
                                </li>
                               
                            </ul>
                            <div id="banner_list">
                                <a href="#" target="_blank">
                                    <DIV CLASS="infoContain">
                                        <img src="img/147243905399147.jpg" >
                                        <div class="starInfo">
                                            <span >国籍：<em class="nation">伊朗</em></span>
                                            <span>身高：<em class="height">178cm</em></span>
                                            <span>体重：<em class=""weight>72kg</em></span>
                                            <span>位置：<em class="position">前锋</em></span>
                                            <span>生日：<em class="birthday">1995/01/01</em></span>
                                            <span>俱乐部：<em class="club">罗斯托夫</em></span>
                                         </div>
                                     </DIV><br />

                                     <DIV CLASS="personNews clearfix">
                                         <h3>艾兹莫恩Sardar Azmoun</h3>
                                        <span>阿兹穆恩号称"伊朗梅西"，年仅21岁便已在俄超征战了四个赛季，15/16赛季为罗斯托夫联赛出场24场，首发15场，打入9球助攻3次。代表国家队出场16次已打入了10球。</span>
                                     </DIV>
                                </a> 
                                <a href="#" target="_blank">
                                    
                                     <DIV CLASS="infoContain">
                                        <img src="img/147220437344390.jpg" >
                                        <div class="starInfo">
                                            <span >国籍：<em class="nation">伊朗</em></span>
                                            <span>身高：<em class="height">181cm</em></span>
                                            <span>体重：<em class=""weight>74kg</em></span>
                                            <span>位置：<em class="position">中场</em></span>
                                            <span>生日：<em class="birthday">1986/07/05</em></span>
                                            <span>俱乐部：<em class="club">卡塔尔联赛</em></span>
                                         </div>
                                     </DIV><br />

                                     <DIV CLASS="personNews clearfix">
                                         <h3>德贾加Ashkan Dejagah</h3>
                                        <span>阿什坎·德贾加先后效力柏林赫塔，沃尔夫斯堡和富勒姆知名欧洲俱乐部，曾拒绝为德国U21比赛，最终选择为伊朗出战。</span>
                                     </DIV>
                                </a> 
                                <a href="#" target="_blank">
                           
                                   <DIV CLASS="infoContain">
                                       <img src="img/147220405619868.jpg" >
                                        <div class="starInfo">
                                            <span >国籍：<em class="nation">伊朗</em></span>
                                            <span>身高：<em class="height">180cm</em></span>
                                            <span>体重：<em class=""weight>73kg</em></span>
                                            <span>位置：<em class="position">中场</em></span>
                                            <span>生日：<em class="birthday">1983/03/06</em></span>
                                            <span>俱乐部：<em class="club">埃斯特格拉尔</em></span>
                                         </div>
                                     </DIV><br />

                                     <DIV CLASS="personNews clearfix">
                                         <h3>泰姆里安Teymourian</h3>
                                        <span>特伊穆里安曾效力英超的博尔顿和富勒姆，现在效力于埃斯特格拉尔，自从2005年入选伊朗国家队后，正赛出场97次，打入9球。</span>
                                     </DIV>
                                </a>
                            </div>
                   </div>            

css：

#banner { position: relative; width: 100%; height:400px; overflow: hidden;   }
#banner_list img { border: 0px; height:115px; margin-top: 10px; margin-left:10px; float:left; }
.starInfo{float:left; padding-left:20px; width:140px;margin-top: 10px;}
.starInfo span{ display:inline-block; width:100%; height:20px; line-height:20px; font-size:0.8em}
.infoContain{ height:130px; ; width:100% ;}
.personNews{ width:86%; margin-left:10px; margin-right:10px; background: rgba(0, 16, 22, 0.4); height:200px; padding-left:10px; padding-right:10px}
.personNews span{ font-size:0.8em ; line-height:25px; }
.personNews h3{ line-height:30px; text-align:center;}
#banner_bg { position: absolute; bottom: 0; background-color: #000; height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px; }
#banner_info { position: absolute; bottom: 0; left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer }
#banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px; }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; }
#banner ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
#banner ul li.on { background-color: #000; }
#banner_list a { position: absolute; }

js：

<!--  明星球员轮播-->
 var t = n = 0,
    count;
    $(document).ready(function() {
        count = $("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function() {
            window.open($("#banner_list a:first-child").attr('href'), "_blank")
        });
        $("#banner li").click(function() {
            var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function() {
                window.open($("#banner_list a").eq(i).attr('href'), "_blank")
            }) ;
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background = "";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function() {
            clearInterval(t)
        },
        function() {
            t = setInterval("showAuto()", 4000);
        });
    })
  
    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }