javascript自動輪播廣告Banner
發表於 : 06-01-2010 | 作者 : admin
分類 : CSS & DIV, HTML & JAVASCRIPT |
1
這幾天在客製化一個廣告輪播banner
於是研究一些現成的作品都不能滿足需求，看起來不是很複雜的需求但是要找也不好找到一模一樣的，只好自己拔他學會弄懂....
需求就是 同一個廣告版位，可後台管理能支援上傳圖片或swf自動判斷
前台就是廣告位，如果建5個廣告，下面就會有12345，每8秒會自動1->2->3...5->1...輪播
可以隨意點數字到想看的廣告，然後一樣8秒後自動從最後點的開始繼續輪播
輪播到的廣告或被點到的廣告，他的相對數字有CSS樣式會換背景圖和換字顏色，
所以也要同時改變css樣式。
大致上是這樣的效果。
如果用flash來處理我覺得就比較好解決
但用javascript就不是我的專門科 = =
不過還好搞定了，後來用了ajax的方式來載入廣告檔
以下是局部代碼
<div id="oferte_content2">廣告位置</div> <a href="#" id="bc1" onClick="showadtop(1);return false;">1</a> <a href="#" id="bc2" onClick="showadtop(2);return false;">2</a> <a href="#" id="bc3" onClick="showadtop(3);return false;">3</a> <a href="#" id="bc4" onClick="showadtop(4);return false;">4</a> <a href="#" id="bc5" onClick="showadtop(5);return false;">5</a>
<script type="text/JavaScript">
var nextbanner=0;
var autoevent=null;
var bannervalue=5;//預設廣告檔代號
var iconchange=null;
var xbannerarr = new Array();//全部廣告檔代號
xbannerarr[0]=1;
xbannerarr[1]=2;
xbannerarr[2]=3;
xbannerarr[3]=4;
xbannerarr[4]=5;
function showstart(){
autoevent=setInterval("showad()",8000);//設定8秒換一次
}
function showad(){
ajax_do('getbanner.php?tag=oferte_content2&amp;no=' + bannervalue);//用廣告代號以ajax取出廣告檔html
geticonB();
geticonA();
nextbanner++;
iconchange=bannervalue;
if(nextbanner>xbannerarr.length-1){nextbanner=0;}
bannervalue=xbannerarr[nextbanner];
}
function showadtop(newbanner){
var kin;
for (kin in xbannerarr)
{
if (xbannerarr[kin] == newbanner)
{
nextbanner=kin;
break;
}
}
bannervalue=newbanner;
showadtopgo();
}
function showadtopgo(){
window.clearInterval(autoevent);
showad();
showstart();
}
function geticonA(){
if(iconchange){
document.getElementById("bc"+iconchange).style.background = "url(images/pag_bg.gif) no-repeat center";
document.getElementById("bc"+iconchange).style.color = "#9d8b8b";
}
}
function geticonB(){
if(bannervalue){
document.getElementById("bc"+bannervalue).style.background = "url(images/pag_bg_a.gif) no-repeat center";
document.getElementById("bc"+bannervalue).style.color = "#ad1614";
}
}
if(bannervalue){
showad();
showstart();
}
</script>
請問圖檔的連結要怎麼加呢？