JSFiddle - React, Tailwind, and code Playground
HTML
<h1>輪播廣告</h1>
<div id="ad"></div>
JavaScript
//廣告的資料
var adData = [ {img:'http://lh3.ggpht.com/UYX3ro5qLZDMyInieR4avSQsmpDVRlbNId4jpGWNzC3sYBh9Ayz1LAoRJciQGECucWXNb0Fzck4VtDqUvvQpLStCA6z2OlwivM09gELP',link:'http://www.google.com/doodles/first-day-of-summer-2013'},
{img:'http://lh6.ggpht.com/-piIYxGNeFjvr5FUYpNQyYTAvDSoqizlbmdkfWCXXkVoLosT3dZ77nl_tujI8_hLiUwY_SbMS4l7FynmTJWSSjH_0uDWwMLF2WGbgfqA',link:'http://www.google.com/doodles/50th-anniversary-of-the-i-have-a-dream-speech'},
{img:'http://www.google.com/logos/2010/manuel-de-falla10-hp.gif',link:'http://www.google.com/doodles/134th-birthday-of-manuel-de-falla'},
{img:'http://www.google.com/logos/2012/olympics-archery-2012-hp.jpg',link:'http://www.google.com/doodles/archery-2012'}
];
//廣告播放器
var AdPlayer = function(adPlaceHolder,adData) {
var currentElm;
var placeHolder;
var adList;
placeHolder = document.getElementById(adPlaceHolder);
adList = adData;
renderAd();
this.start = function(){
getAd();
setInterval(function(){
hideAd();
getNewAd();
},3000);
}
//產生廣告元素
function renderAd(){
var template = '<div id="ad-{{no}}" style="display:none"><a href="{{url}}" rel="nofollow"><img src="{{imgPath}}" border="0" width="335" /></a></div>';
for(var i=0; i<adList.length; i++) {
var adContent = placeHolder.innerHTML;
var temp = template;
temp = temp.replace(/{{no}}/,i);
temp = temp.replace(/{{url}}/,adList[i].link);
temp = temp.replace(/{{imgPath}}/,adList[i].img);
adContent += temp;
placeHolder.innerHTML = adContent;
}
}
//改變廣告的狀態
function getAd(){
var no = getRandomNo();
currentElm = document.getElementById("ad-"+ no);
currentElm.style.display = "block";
}
var getNewAd = getAd;
function hideAd(){
currentElm.style.display = "none";
}
//亂數播放廣告號碼
function getRandomNo(){
var size = adList.length;
var no =...