iT邦幫忙

1

利用 JavaScript 快速建立廣告輪播看版

  • 分享至 

  • xImage
  •  

因應某個小小專案需求...需要建立廣告輪播看版
剛好看到某個高手分享
How to Create an AdRotator using JavaScript?

就自己稍做改良~

<div id="ad"></div>
<script language="JavaScript" type="text/javascript">
function adshow(){
    ads = new Array(5);
    ads[0] = "<a href='http://www.yahoo.com' rel='nofollow'><img src='http://l.yimg.com/f/i/tw/hp/mh/12purple.gif' border='0' height='90px' width='480px'/></a>";
    ads[1] = "<a href='http://www.google.com' rel='nofollow'><img src='https://www.google.com.tw/images/srpr/logo4w.png' border='0' height='90px' width='480px'/></a>";
    ads[2] = "<a href='http://www.msn.com' rel='nofollow'><img src='http://sin.stb01.s-msn.com/i/C8/FFA381A7F279445EDEA5452DA53510.gif' border='0' height='90px' width='480px'/></a>";
    ads[3] = "<a href='http://www.apple.com' rel='nofollow'><img src='http://images.apple.com/support/assets/images/products/programs/hero_programs.jpg' border='0' height='90px' width='480px'/></a>";
    ads[4] = "<a href='http://www.amazon.com' rel='nofollow'><img src='https://sellercentral.amazon.com/forums/servlet/JiveServlet/download/79-177671-2508901-1990/Amazon-logo.jpg' border='0' height='90px' width='480px'/></a>";
    index = Math.floor(Math.random() * ads.length);
	document.getElementById("ad").innerHTML = ads[index];
}
setInterval(function(){adshow()},3000);
</script>

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
lalabear
iT邦新手 2 級 ‧ 2013-09-03 19:10:03

來交流一下。首先:

&lt;pre class="c" name="code">ads = new Array(5); 

這個寫法非常不JavaScript,變數宣告要加上var,不然就變成全域變數了。其次JavaScript的Array通常不會用new,也不會宣告數量,而是直接用陣列實字,像法比較是:

&lt;pre class="c" name="code">var ads = [
"&lt;a href='http://www.yahoo.com' rel='nofollow'>&lt;img src='http://l.yimg.com/f/i/tw/hp/mh/12purple.gif' border='0' height='90px' width='480px'/>&lt;/a>",  
"&lt;a href='http://www.google.com' rel='nofollow'>&lt;img src='https://www.google.com.tw/images/srpr/logo4w.png' border='0' height='90px' width='480px'/>&lt;/a>",
"&lt;a href='http://www.msn.com' rel='nofollow'>&lt;img src='http://sin.stb01.s-msn.com/i/C8/FFA381A7F279445EDEA5452DA53510.gif' border='0' height='90px' width='480px'/>&lt;/a>",...
]
0
lalabear
iT邦新手 2 級 ‧ 2013-09-03 19:14:37

另外,如果是我來寫的話,還會考慮兩件事。

1)資料和DOM物件分離

也就是說,我會把url和路徑獨立成一個array,例如

&lt;pre class="c" name="code">var adData = [
        { link:''http://www.yahoo.com', imgSrc:"http://l.yimg.com/f/i/tw/hp/mh/12purple.gif"},   
       { link:'http://www.google.com', imgSrc:"https://www.google.com.tw/images/srpr/logo4w.png"},...

讓資料歸資料,然後DOM的結構另外分出來,再用迴圈去合成,例如

&lt;pre class="c" name="code">   for(var i=0; i&lt;ads.length;i+=)  {
  adElms.push('&lt;a href="'+ adData[i] +'" rel="nofollow">&lt;img src="'+adData[i]+'" border="0" height="90px" width="480px" />&lt;/a>');}

這樣如果有需要調整html的結構時,例如改寬、高的值,只要改一個地方,5個都會全改。

2)製作DOM的效率
一直用innerHTML去隨機生成DOM,效率應該不如一開始先把5個生出來,用CSS藏好,再利用setInterval去切換css的狀態。

以上幾點供您參考。

iknowlab iT邦研究生 4 級 ‧ 2013-09-04 08:36:46 檢舉

給個讚!
雖然我看不太懂來龍去脈,但我相信一定是多年功力的累積,才能提出此獨到見地。
最重要的是,還願意完全分享,供大家據以精進。

0

感謝 lalabear 大大的心得分享 讚
小弟也不過是 Javascript 的新手...臉紅
拋磚引玉是希望可以吸引更多的高手提供更正確,更好的做法.
幫助更多的朋友~飛

lalabear iT邦新手 2 級 ‧ 2013-09-04 10:53:27 檢舉

就交流交流,互相進步。

下午有空的話,來寫個會動的版本。

另外想問,這個專案沒有用jQuery嗎? 用jQuery應該會比較方便。

lalabear提到:
另外想問,這個專案沒有用jQuery嗎? 用jQuery應該會比較方便。

是寫給學校小朋友, 專題用的 Sample, 怕再教他們用 jQuery... 他們會昏倒暈

0
lalabear
iT邦新手 2 級 ‧ 2013-09-04 18:51:52

Demo在這裡,先貼上來,晚點再解釋
http://jsfiddle.net/XQfYP/

我要留言

立即登入留言