活動1  活動2
本站需要您的支持,以助網站更好運作:
(1)懇請您捐款購買推薦商品
(2)或懇請您戳戳它↓(無法顯示請重整或點此)



本站公告:
鼓勵本站:您的贊助是本站動力來源
◆推薦本站:歡迎分享文章連結給好友
◆拜訪本站:文章陸續更新,歡迎關注
◆介紹本站:歡迎介紹好友來本站坐坐
◆聯絡本站:
(1)可在文章下或此頁任一處留言即可
(2)內容不合規定者會刪除,還請見諒
◆今日更新: 快感指令next奇迹暖暖陰陽師白島手遊列表
P.S.快感指令next(中版):歡迎各位提供席德線選項,幫助更多玩家!
 公告.更新  文章搜尋

2014/01/22

[網站技術]跑馬燈、圖片輪播語法







製作網站、部落格的時候,需要一些語法特效來達到一些美觀或宣傳效果,本文介紹跑馬燈和各種圖片輪播的語法。






跑馬燈

語法:

<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">&lt;</li>

                <li class="next">&gt;</li>

            </ul>

        </div>

    </div>