圖片展示系統(tǒng)是每個網(wǎng)站都有的，這樣通用行就十分重要，移植越簡單學(xué)好，整理我以前開發(fā)的所有項目，從中提取一個最簡單使用的進行整理，首先看一下這個圖片展示的效果。
圖一
圖二
這款圖片展示系統(tǒng)，通用很強只要程序員開發(fā)完程序交給美工，美工編寫各種CSS樣式會展現(xiàn)不同的效果，我們來看看它如何實現(xiàn)實現(xiàn)的。
一、HTML代碼
首先我們看看HTML代碼，對于美工來說這個代碼非常簡單他們美化起來也十分方便。
<!--圖片展示容器--><div class="dtl_focusbox"><!--圖片容器--> <div class="dtl_crtimg"> <ul> <li><a href="" target="_blank"><img src="images/1.gif" width="543" height="285" border="0" alt=""/></a></li> <li><a href="" target="_blank"><img src="images/2.gif" width="543" height="285" border="0" alt=""/></a></li> <li><a href="" target="_blank"><img src="images/3.gif" width="543" height="285" border="0" alt=""/></a></li> <li><a href="" target="_blank"><img src="images/4.gif" width="543" height="285" border="0" alt=""/></a></li> <li><a href="" target="_blank"><img src="images/1.gif" width="543" height="285" border="0" alt=""/></a></li> </ul> </div> <!--標題容器--> <div class="dtl_focuslist"> <ul> <li class="bar_crt">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div></div>
我們分析一下這段HTML代碼，整個的圖片展示包含在一個div中，這樣方便我們以后拷貝這要拷貝這個DIV就行了，上面是一個包含圖片DIV，下面是個包含標題的div這樣十分有利于美工進行美化，標題可以根據(jù)Css樣式顯示在不同的位置，想上面的圖一、圖二所示其實是同一個圖片展示系統(tǒng)只是CSS樣式不同展示的效果也就不同。
二、CSS樣式文件
這部分代碼我不想多說，因為這部分代碼很靈活，不同的美工根據(jù)不同項目的需要可以編寫不同的CSS樣式，我把我開發(fā)的一個項目的CSS代碼拷貝如下：
<style> ul{padding:0px; margin:0px;} li{margin:0px; padding:0px;}.dtl_focusbox{ height:285px; width:543px; overflow:hidden; margin:0 auto;}.dtl_focuslist{ height:30px; position:absolute; z-index:100; top:255px; width:543px;}.bar_crt{color:#fff; background-color:#F00;}.dtl_focuslist ul{ height:30px; background:#CCC; margin:0px; padding:0px; line-height:30px;filter:alpha(Opacity=60);-moz-opacity:0.4;opacity: 0.4; z-index:100;}.dtl_focuslist li{display:inline; float:right; width:20px; height:20px; text-align:center; border:1px #FFF solid; margin:2px; line-height:20px; cursor:pointer;}</style>
三、JS代碼
這段代碼也十分簡單，不想其它圖片展示系統(tǒng)那么復(fù)雜，邏輯思維也很清楚，代碼中標有詳細的注解，具體如下：
<script>//網(wǎng)頁載入后開始執(zhí)行下面的代碼 $(window).load(function(){ big_banner(".dtl_focusbox",".dtl_crtimg",".dtl_focuslist","bar_crt") })//圖片展示函數(shù)//參數(shù)說明：banner_panel 圖片展示容器 可以是class，也可以是ID如果是前者用“.”+樣式名，如果后者用“#”+樣式名//img_panel 圖片容器//bar_list 標題容器//bar_crt 當前展示標題樣式var big_banner=function(banner_panel,img_panel,bar_list,bar_crt){ var allNum = 0; var i, j; //獲取圖片總數(shù) var indexNum = $(img_panel).find("li:last-child").index(); //載入第一副圖片 $(img_panel).find("li:first-child").fadeIn(1000); //為標題列表添加鼠標滑動事件 $(bar_list).find("li").mouseover(function(){ var num = $(this).index(); allNum= num; $(this).addClass(bar_crt).siblings().removeClass(bar_crt); $(img_panel).find("li").eq(num).fadeIn(800).siblings().hide(); }); //圖片切換效果，如果您對js非常熟悉可以添加不同的效果 function imgScroll(){ $(bar_list).find("li").eq(allNum).addClass(bar_crt).siblings().removeClass(bar_crt); $(img_panel).find("li").eq(allNum).fadeIn(1000).siblings().hide(); allNum += 1; if(allNum>indexNum) allNum=0; } //為圖片展示系統(tǒng)添加自動切換效果，這是一個定時器 每3秒滑動一副圖片 var anima = setInterval(imgScroll,3000); $(banner_panel).hover( function () { clearInterval(anima); }, function () { anima = setInterval(imgScroll,3000); } ); } </script>
這段代碼靈活性也是很高的如果您對我的這個圖片淡入淡出效果不滿意可以隨便修改imgScroll()函數(shù)做出您想要的各種效果，好了我們的圖片展示就講解完了，最后附上源代碼歡迎下載。
