在做校園網視頻網站的時候，首頁有一個導航頁面要實現滾動效果，有樣例，但代碼是在難弄懂，貌似網頁設計這塊還是只有自己的代碼自己懂，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的，不次於原作的么。 現在先把代碼拷貝到這裡，以後再逐一簡化修改： 實現混動效果，腳本代碼如下： var a ...
在做校園網視頻網站的時候，首頁有一個導航頁面要實現滾動效果，有樣例，但代碼是在難弄懂，貌似網頁設計這塊還是只有自己的代碼自己懂，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的，不次於原作的么。 現在先把代碼拷貝到這裡，以後再逐一簡化修改： 實現混動效果，腳本代碼如下： var all=0; //滾動單位的個數 var no=0; //當前要滾動的位置，每隔短時間遞增 var s_width=0; //滾動單位的寬度 $(document).ready(function(){ all=$('.slide').length; //得到需要滾動單位的頁面的個數 s_width=$('.slide').eq(0).width(); //得到滾動單位的寬度 $("#slides").css('width',all*s_width);//把外層容器的寬度設為所有滾動單位的總合 var contiar=$('.control_links'); for(var i=0;i<all;i++){ contiar.append("<li></li>"); } $('.control_links li').bind('click mouseenter',function(){ var index=$(this).index(); no=index; var no_= no%all; $("#slides").animate({left:(-1*no_*s_width)+'px'},200); $(this).css('background-color','#fff'); $(this).siblings().css('background-color','#333'); }); //一下為一個迴圈執行的頁面切換函數，每隔5秒切換一回 setInterval(function(){ var no_= no%all;//得到當前要滾動的位置 $("#slides").animate({left:(-1*no_*s_width)+'px'},1000); //滾動 var curr= $('.control_links li').eq(no_); curr.css('background-color','#fff') curr.siblings().css('background-color','#333'); no++; },5000); }); css 代碼如下： img{ border:none; } #daohangpic { width:1000px; margin:0 auto; padding:20px; overflow:hidden; } #daohangpic img { height:380px; width:980px; } #contiar { position:relative; width:980px; height:380px; overflow:hidden; margin:0 auto; } #slides { position:absolute; border:none; } .slide { float:left; width:980px; height:380px; overflow:hidden; border:none; } .control_links{ position:absolute; bottom:10px; right:10px; z-index:200; } .control_links,.control_links li { list-style: none; } .control_links li { float:left; width: 15px; height: 15px; margin-right: 5px; text-align: center; background:#333; border: 1px solid #666; cursor: pointer; opacity:0.5; } .caption { position:absolute; height:50px; width:100%; bottom:0px; padding-left:20px; padding-top:10px; overflow:hidden; z-index:100; background:url(hdpng.png) no-repeat scroll 0 -1px; } .caption h2 { color: #FFF; font-size: 17px; font-weight: bold; line-height:25px; } .caption p{ display: block; color: #767676; font-size:12px; line-height:15px; } 要實現滾動的區域html代碼如下： <div id="daohangpic"> <div id="contiar"> <div id="slides"> <div class="slide"> <a href="" ><img src="" > </a> <div class="caption" ></div> </div> <div class="slide"> <a href=""></a> <div class="caption" ></div> </div> <div class="slide"><a href=""></a> <div class="caption"> </div> <div class="slide"><a href=""></a> <div class="caption"> </div> </div> </div> </div>
