愛奇藝輪播圖效果的jquery代碼實現(xiàn)。

html部分：

            <div id="banner">
                <div id="banner-pic">
                    <ul>
                        <li class="selected"><img src=""/></li>
                        <li><img src=""/></li>
                        <li><img src=""/></li>
                    </ul>
                </div>
                <div id="banner-text">
                    <ul>
                        <li><a href="javascript:;" class="selected-a">夢想的聲音:老蕭神曲燃爆全場</a><!--<p>老蕭神曲燃爆全場</p>--></li>                         
                        <li><a href="javascript:;">超模:歡歡時裝周遭哄搶成秀霸</a><!--<p>歡歡時裝周遭哄搶成秀霸</p>--></li>
                        <li><a href="javascript:;">靈魂擺渡3:結(jié)局趙吏去向成謎</a><!--<p>結(jié)局趙吏去向成謎</p>--></li>
                    </ul>
                </div>
            </div>

css部分：

           #banner{position: relative;}
           #banner-pic li{display: none;width: 100%;overflow: hidden;}
           #banner-pic img{width: 100%;height: auto;}
           #banner-pic li.selected{display: block;}
           #banner-text{width: 300px;position: absolute;top: 80px;right: 100px;z-index: 99999;background: rgba(0,0,0,0.6);border-radius: 9px;text-align: center;}
           #banner-text li{display: block;margin: 10px auto;}
           #banner-text a{background: url(img/zuobai.png) no-repeat;background-position: left top;background-size: contain;width: 100%;display: block;color: rgb(255,255,255);opacity: 0.5;}
           #banner-text p{position: absolute;bottom: 0px;right: 350px;display: none;color: green;font-size: 30px;}
           #banner-text p.show{display: block;}
           #banner-text a.selected-a{color: red;opacity: 1;}

jquery部分：

            $(function(){
               var i=0;
               var timepic=null;
               function a_noselected(){
                   $('#banner-text a').each(function(){
                           if($(this).hasClass('selected-a'))  $(this).removeClass('selected-a');
                       })
               }
               function pic_noselected(){
                   $('#banner-pic li').each(function(){
                       if($(this).hasClass('selected'))    $(this).removeClass('selected');
                   })
               }
               function pic_show(index){
                   $('#banner-pic li').eq(index).addClass('selected');
               }
               function auto(){
                   timepic=setInterval(function(){             
                       var piclength=$('#banner-pic li').length;
                       pic_noselected();
                       a_noselected()
                       pic_show(i);
                       $('#banner-text a').eq(i).addClass('selected-a');
                       i++;
                       if(i==piclength) i=0;
                   },2000)
               }
               auto();
               $('#banner-text a').on('mouseover',function(){
                   clearInterval(timepic)                  
                   a_noselected();
                   $(this).addClass('selected-a');                 
               })
               $('#banner-text a').on('mouseout',function(){
                   auto();
                   hidep();
               })
               function hidep(){
                   $('#banner-text p').each(function(){
                       if($(this).hasClass('show'))    $(this).removeClass('show');
                   })
               }
               $('#banner-text a').on('click',function(){
                   hidep();
                   pic_noselected();
                   a_noselected();
                   $(this).addClass('selected-a');
                   $(this).parent().find('p').addClass('show');
                   var j=$(this).parent().index();
                   pic_show(j);
               })
               $('#owl-slide').owlCarousel({
                   items: 1,
                   slideSpeed: 300,
                   autoPlay: true,
                   autoPlayTimeout: 1000,
                   autoPlayHoverPause: true
               })
             })