製作網站、部落格的時候，需要一些語法特效來達到一些美觀或宣傳效果，本文介紹跑馬燈和各種圖片輪播的語法。
跑馬燈
語法：
<marquee style="border: 2px solid #000000" scrolldelay="150" bgcolor="#FFFFFF" width="150" height="20"><img src="圖片網址"> 文字內容<a href="連結網址"target="_blank">連結顯示文字</a></marquee>
border: 2px solid #000000 (框線粗細 樣式 顏色)
scrolldelay="跑馬燈的速度" (數值越大速度越慢)
bgcolor="背景顏色代碼"
width="跑馬燈寬度" height="跑馬燈高度"
img src="圖片網址"
<a href="連結網址" target="_blank">連結顯示文字</a>
target="_blank" =在新視窗開啟 (要在原視窗開啟可刪除此語法)
◆◆BOTSODG+~世界一空~◆◆
圖片輪播1(圖片+超連結)
<a href="連結目的網址" _fcksavedurl="連結目的網址"target="_blank"> <script Language="JavaScript1.1">
var slidespeed=播放速度
var slideimages=new Array("圖片1","圖片2",)
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages .length;i++){ imageholder[i]=new Image()
imageholder[i].src=slideimages[i] } function gotoshow(){
window.location=slidelinks[whichlink] }
</SCRIPT><img src="" _fcksavedurl="" name="slide"style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" align="middle" border="0"><script language="JavaScript1.1">
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){ if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages .length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay) }
slideit() </script></slideimages></script></slideimages></script></a>
a href="連結目的網址" 按下圖片連到的網址
var slidespeed=播放速度 數字越大速度越慢
var slideimages=new Array("圖片1","圖片2",)
◆◆BOTSODG+~世界一空~◆◆
圖片輪播2(圖片+超連結)
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var how_many_ads = 4; //你要有幾個廣告輪播
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="第一個網站網址"; //第一個廣告的目的網站網址(下同)
alt="第一個廣告文字內容";
banner="第一個廣告顯示的圖片位址.gif""; //該廣告顯示的圖片位址
width="468"; //廣告圖片的長度
height="60"; //廣告圖片的寬度
}
if (ad==2) {
url="第二個網站網址";
alt="第二個廣告文字內容";
banner="第二個廣告顯示的圖片位址.gif";
width="468";
height="60";
}
if (ad==3) {
url="第三個網站網址";
alt="第三個廣告文字內容";
banner="第三個廣告顯示的圖片位址.jpg";
width="468";
height="60";
}
if (ad==4) {
url="第四個網站網址";
alt="第四個廣告文字內容";
banner="第四個廣告顯示的圖片位址.swf";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href="' + url + '" target="_blank">');
document.write('<img src="' + banner + '" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt="' + alt + '" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</SCRIPT>
◆◆BOTSODG+~世界一空~◆◆
圖片輪播3(圖片+超連結，需用SWF)
<script language=javascript>
<!--
adImages = new Array() //開一個新的Array物件，物件名為adImages.
adImages[0] = "../images/廣告檔案名一.gif"
adImages[1] = "../images/廣告檔案名二.jpg"
adImages[2] = "../images/廣告檔案名三.swf" //以上為要顯示廣告的位址
Links = new Array()
Links[0] = "網頁一.htm"
Links[1] = "網頁二.htm"
Links[2] = "網頁三.htm" //以上為配合廣告被點閱時，指定要連結的網頁
var currentAd = 0
var ImgNum = 3 //設定廣告數量，通常有幾個廣告，就應該設定相應的數字
function cycling() {
currentAd = currentAd + 1
if (currentAd == ImgNum) {
currentAd = 0
}
document.adarea.src = adImages[currentAd]
◆◆BOTSODG+~世界一空~◆◆
圖片輪播4(圖片+超連結，左右水平移動)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>左右水平廣告輪播-語法</title>
<style type="text/css">
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
#abgne-block-20110317 {
width: 540px; /* 圖片的寬 */
height: 250px; /* 圖片的高 + 30 */
border: 10px solid #ddd;
}
.abgne-player {
width: 540px; /* 圖片的寬 */
height: 220px; /* 圖片的高 */
position: relative;
overflow: hidden;
}
.abgne-player ul.abgne-list {
position: absolute;
width: 9999px;
height: 100%;
}
.abgne-player ul.abgne-list li {
float: left;
width: 540px; /* 圖片的寬 */
height: 100%;
}
.abgne-player ul.abgne-list img{
width: 100%;
height: 100%;
border: 0;
}
.abgne-control {
height: 24px;
padding: 3px;
color: #fff;
font-size: 13px;
background: #333;
}
.abgne-control ul {
float: left;
}
.abgne-control ul li {
float: left;
padding: 0 5px;
line-height: 20px;
margin: 2px;
background: #666;
cursor: pointer;
}
.abgne-control ul.numbers {
margin-left: 13px;
}
.abgne-control ul li.current {
background: #fff;
color:#000;
}
.abgne-control ul li.hover {
background: #fff;
color:#000;
}
</style>
<script type="text/javascript">
$(function(){
// 先取得必要的元素並用 jQuery 包裝
// 再來取得 $block 的高度及設定動畫時間
var $block = $('#abgne-block-20110317'),
$slides = $block.find('ul.abgne-list'),
_width = $block.width(),
$li = $slides.find('li'),
$control = $block.find('.abgne-control'),
_animateSpeed = 600,
// 加入計時器, 輪播時間及控制開關
timer, _showSpeed = 3000, _stop = false;
// 設定 $slides 的寬(為了不讓 li 往下擠)
$slides.css('width', ($li.length + 1) * _width);
// 產生 li 選項
var _str = '';
for(var i=0, j=$li.length;i<j;i++){
// 每一個 li 都有自己的 className = playerControl_號碼
_str += '<li class="abgne-player-control_' + (i+1) + '">' + (i+1) + '</li>';
}
// 產生 ul 並把 li 選項加到其中
var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control),
$numberLi = $number.find('li');
// 並幫 .numbers li 加上 click 事件
$numberLi.click(function(){
var $this = $(this);
$this.addClass('current').siblings('.current').removeClass('current');
clearTimeout(timer);
// 移動位置到相對應的號碼
$slides.stop().animate({
left: _width * $this.index() * -1
}, _animateSpeed, function(){
// 當廣告移動到正確位置後, 依判斷來啟動計時器
if(!_stop) timer = setTimeout(move, _showSpeed);
});
return false;
}).eq(0).click();
// 幫 .arrows li 加上 click 事件
$control.find('ul.arrows li').click(function(){
var _index = $numberLi.filter('.current').index();
$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
return false;
});
// 當滑鼠移到 $control li 上時, 加上 .hover 效果
// 反之則移除
$control.find('li').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
// 如果滑鼠移入 $slides 時
$slides.hover(function(){
// 關閉開關及計時器
_stop = true;
clearTimeout(timer);
}, function(){
// 如果滑鼠移出 $block 時
// 開啟開關及計時器
_stop = false;
timer = setTimeout(move, _showSpeed);
});
// 計時器使用
function move(){
$control.find('ul.arrows li.next').click();
}
});
</script>
</head>
<body>
<div id="abgne-block-20110317">
<div class="abgne-player">
<ul class="abgne-list">
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
<li><a target="_blank" href="文章網址"><img src="圖片網址"></a></li>
// 如果你希望圖片繼續多一點，那就自己再複製增加
</ul>
</div>
<div class="abgne-control">
<ul class="arrows">
<li class="prev"><</li>
<li class="next">></li>
</ul>
</div>
</div>