javascript 垂直輪播(跑馬燈、vertical carousel)

2008-12-25

這邊使用一個別於<marquee>的用法

這是在網路上找到的
(很抱歉我忘記出處了 如果有人知道的話請告訴我 謝謝)
然後小小改了一點
主要是利用overflow跟scrollTop這兩個屬性
overflow:hidden的意思就是
當內容超過長度或寬度的時候
不顯示滾動條
而是直接隱藏超過的部份
scrollTop則是目前滾動條與最上面的距離
首先設定一個style(也可以直接放在標籤裡)

.ann{overflow:hidden;height:20px;}

這是html的部份
包在外面的div高度跟裡面個別的div高度設定成一樣
這樣一次可以顯示一個

<div id="ann_box" class="ann" style="width:100px;">
  <div id="a1" class="ann"><a href="exp01.php" >exp01</a></div>
  <div id="a2" class="ann"><a href="exp02.php" >exp02</a></div>
  <div id="a3" class="ann"><a href="exp03.php" >exp03</a></div>
  <div id="a4" class="ann"><a href="exp04.php" >exp04</a></div>
  <div id="a5" class="ann"><a href="exp05.php" >exp05</a></div>
</div>

這是javascript的部份

function slideLine(box,stf,delay,speed,h)
{
  //取得id
  var slideBox = document.getElementById(box);
  //預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
  //       speed:數字越小越快,h:高度
  var delay = delay||1000,speed = speed||20,h = h||20;
  var tid = null,pause = false;
  //setInterval跟setTimeout的用法可以咕狗研究一下~
  var s = function(){tid=setInterval(slide, speed);}
  //主要動作的地方
  var slide = function(){
  //當滑鼠移到上面的時候就會暫停
    if(pause) return;
  //滾動條往下滾動 數字越大會越快但是看起來越不連貫,所以這邊用1
    slideBox.scrollTop += 1;
  //滾動到一個高度(h)的時候就停止
    if(slideBox.scrollTop%h == 0){
  //跟setInterval搭配使用的
      clearInterval(tid);
  //將剛剛滾動上去的前一項加回到整列的最後一項
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
  //再重設滾動條到最上面
      slideBox.scrollTop = 0;
  //延遲多久再執行一次
      setTimeout(s, delay);
    }
  }
  //滑鼠移上去會暫停 移走會繼續動
  slideBox.onmouseover=function(){pause=true;}
  slideBox.onmouseout=function(){pause=false;}
  //起始的地方,沒有這個就不會動囉
  setTimeout(s, delay);
}
//網頁load完會執行一次
//五個屬性各別是:外面div的id名稱、包在裡面的標籤類型
//延遲毫秒數、速度、高度
slideLine('ann_box','div',2000,25,20);

按這裡可以看範例

不過如果原本有使用framework如prototype或是jquery的
可以直接找他們的plugin來使用(怎麼最後才講XD)
這裡的用法是
當如果這網頁沒有要load哪個framework的時候
但是又想要有個輪播功能
就可以節省load的時間囉
是不是~

注意:scrollTop、scrollLeft有些瀏覽器不支援(不過ie跟fx都有)

Comments

  • […] 根據前一篇的原理 可以使用同樣的方法製作捲動選單 […]

  • […] 根據這一篇跟這一篇的原理 可以使用同樣的方法製作水平捲動選單 […]

  • maomo 說:

    很實用的資訊,解決了我目前的問題
    謝謝分享!

  • hsin 說:

    歐歐~可以幫得上忙我很高興~:D

  • lai 說:

    請問這個範例只有一筆一筆可以轉,假如我要一次有5筆資料可以輪流向上轉上去,要怎麼做到呢?謝謝

  • hsin 說:

    可以看一下範例頁面
    http://ex.hsin.tw/exp06.php
    我有加上 當多個的時候要怎麼修改
    有兩種方式都可以用
    一種是改變html 就是把原本的div高度調高 裡面放多個元素
    或是改變js 判斷輪播一次要把幾個元素往後面擺
    看一下範例的原始碼應該就可以瞭解囉

  • Pelin 說:

    請問一下,如果我想要利用按鈕讓資料轉上或轉下,該如何修改~~~
    還有當我轉下時,第一筆資料會加到最後一筆,那如果我要轉上時,該如何把最後一筆資料加到第一筆呢???

  • hsin 說:

    這篇文章的東西要改變轉上轉下好像沒辦法 (或是我比較遜orz)
    因為scrollTop的關係 換的時候可能會有跳動、不連續的畫面出現
    可能要找其他的方法

    至於換方向變成轉上的我已經加在練習頁上了
    http://ex.hsin.tw/index.php?type=javascript&act=06
    在最下面
    有小小更改一點東西
    主要是先將scrollTop設為跟scrollHeight一樣
    也就是跑到那個容器的最下面(捲軸拉到最下面的意思)
    接著的動作就跟原本的差不多
    而要把最後一筆加到第一筆
    是使用insertBefore
    字面上應該可以了解就是 插入到之前的意思 囉
    用法是
    容器.insertBefore(最後一個node , 第一個node);
    這是例子
    var s=document.getElementById(‘ann_box’);
    s.insertBefore(s.getElementsByTagName(‘div’)[s.getElementsByTagName(‘div’).length-1],s.getElementsByTagName(‘div’)[0]);

  • cheney 說:

    請問,如果要讓它自動上下捲動,但滑鼠指到時停止,要改哪些部份呢? 謝謝!

    來自 taioaan

  • hsin 說:

    目前這個版本已經可以滑鼠指到的時候會停止
    你的問題是這個嗎?

  • Patty 說:

    請問這個要怎麼弄呢??
    我把javascript的部分貼在 裡
    再放到 裡
    html部分放在裡
    可是他不會動耶><"
    麻煩版主幫我解答*跪求,謝謝

    *sorry,上一篇沒弄好,還請刪除,謝謝

  • hsin 說:

    我看不懂你的問題
    你有完整的原始碼放在網路上嗎?

  • Patty 說:

    sorry,

    我是把javascript的部分貼在 script標籤 裡
    再放到 head 標籤 裡
    html部分放在 body標籤 裡
    可是他不會動><"
    實在不理解為什麼會這樣

  • hsin 說:

    沒有碼我也不確定你的問題在哪
    有可能的一個問題是
    你應該要把script部份 擺在html碼之後
    如果在操作的html碼還沒生成前 就執行js
    這樣會因為找不到標籤 而有發生錯誤

    ex:
    <html>
    <body>
    html的部份

    javascript碼的部份
    </body>
    </html>

    如果堅持要擺在<head>中的話
    就要用onload之類的東西來使用
    如果需要的話再深入研究吧 咕狗看看
    不然就是用上面講的 把script碼 擺在html碼之後

  • Patty 說:

    可以了可以了!!
    謝謝版主的幫忙:))

  • eva 說:

    請問版大:
    我的字數較長,但版面很小,
    我想要div裡的字數用br斷行後,仍可一起輪動….
    可否讓高度增加為兩行輪動….

    我改變div的height沒用
    我改變js裡的h,變成跑馬的篇幅變高,但字還是被蓋住
    我改變function裡的高度參數也沒用
    請問有辦法嗎?
    謝謝

  • hsin 說:

    以範例頁來說明的話 要改兩個地方
    假設是要變成兩倍為40px
    1. div.ann的高度改成40px –> height:40px;
    2. 丟進function的最後一個參數改成40 –> slideLine(‘ann_box’,’div’,2000,25,40);
    不同的高度就是依此類推

    這樣就可以增加高度了
    每個div就可以加br增加內容

  • ming 說:

    感謝阿,正好在找這類的JS code,原本用《marquee》太醜,感謝分享: )

  • Fishwalking 說:

    請問版主,這個跑馬燈有辦法改成左右輪播的嗎?

    我把裡面三個scrollTop都改成scrollLeft
    然後原本輸入高值的地方改為寬值,但是DeBug出來卻變成不會滑動
    直接切成下一張圖片。

    不過其他部分都有正確運作。
    請問是不是還有什麼地方需要修改呢?

  • hsin 說:

    請參考
    http://ex.hsin.tw/index.php?type=javascript&act=08
    這頁是水平選單 用類似這頁的作法就可以改成水平輪播
    改用scrollLeft需要多加兩個div在外面
    並設定css

    下面這則是我改過的
    http://ex.hsin.tw/index.php?type=javascript&act=062
    往左輪播

  • Fishwalking 說:

    感謝您,大概知道要怎麼用了:)

    多謝幫忙~

  • wei 說:

    你好~我嘗試了一下水平輪播
    請問如果要把寬度加寬要在哪裡設定
    是可以把div加寬 但是超過一定寬度會看到2~3筆文字
    請問還有什麼地方需要做修改??

  • hsin 說:

    請參考 http://ex.hsin.tw/index.php?type=javascript&act=062
    我有作了點小修改
    要改變寬度的話
    需要改 .box{} 這裡面的width
    以及slideLine函式的第六個參數 w

  • AS 說:

    假設裡面有3個div,3個div總高度<=外面div高度
    不會動

  • AS 說:

    仔細試一下後,應該說當第一個物件還沒捲完時,如果剩下的總長度不夠,就不會動了

  • hsin 說:

    不太懂意思
    高度不一樣的話 是可能有問題沒錯
    不過通常來說 裡外的高度應該要一樣才是
    不然有些物件會被切一半 不太好看
    有原始碼可以看嗎?
    你的頁面是公開的嗎

  • AS 說:

    舉個垂直跑的例子好了
    跑馬燈的框, 顯示區外層div高120
    內部捲軸由3個div物件構成, 皆高60,整個捲軸正好高180
    剛好能捲動(超過60都可)

    如果皆高59,則當第一個div物件捲到剩(顯示框內)兩個pixel,
    框內 [2+59+59] 就停住不再動了 (第3個div後面沒有其他東西)

    基本上框高度,整個軸高度與內部單一物件高度三要素都要夠捲完一次,才能完整運作

  • hsin 說:

    是的 你說的情況的確是會停住
    如果了解 js 的話
    可以看一下 function 裡面運作的方式
    他每次會把 slideBox.scrollTop 加一
    加到外框高度時 才會進行下一個 setTimeout
    但是因為內部高度不夠 所以捲不到 所以就停了
    然後剛剛測試才發現
    其實如果是捲 3 個 div 的那個例子
    裡面少於 6 個 div 都不會好好的捲

    不過我是不打算再加了
    建議是找 jQuery 的 plugin 實現會比較快
    或是有想改看看的朋友也請不吝分享
    謝謝囉~

  • Chao 說:

    你好,我想把這功能用在部落格上,可是我不知道該如何使用,煩請不吝指導,謝謝!

  • hsin 說:

    如果是自架站的blog 應該是把碼複製過去就可以了
    如果是像pixnet, 無名的blog
    可能要看他們的規定
    有些不讓人擺這種javascript碼

  • Chao 說:

    我用的是Blogger。我已經試過複製上面的語法來使用,我把第一部分和第三部分放入css當中,第二部分則是放在一個側邊欄位(sidebar)中,可是並沒有出現如同您範例中的效果。請問,我哪個部分做錯了?

  • hsin 說:

    第三部分如果指的是javascript
    那些碼要夾在 中間
    然後擺在側邊欄位裡面
    也就是跟第二部分同一個地方

    但我不確定Blogger有沒有開放自由擺javascript
    請再確認看看

  • Chao 說:

    抱歉,上一篇留言沒弄好,請幫我刪除,謝謝。

  • hsin 說:

    好的
    這邊留言因為安全性的原因
    如果有留 html 或 javascript 的東西 會被濾掉
    我昨天也忘記這件事了

  • Chao 說:

    之前一直在忙沒整理,我終於把用在Blogger的方式整理好了。

    http://www.chaofree.com/2013/04/javascript-vertical-carousel.html

    謝謝你分享的這篇文章!

  • 洋小介 說:

    //延遲多久再執行一次
    setTimeout(s, delay);

    不好意思~上方這個設定完後
    在IE瀏覽器上所顯示的網頁裡沒有成功重複執行耶
    跑完一次就變空白了耶~請問在哪個地方能設定重複滾動呢??

    感激>_<

  • hsin 說:

    IE的版本是?
    http://ex.hsin.tw/index.php?act=06
    範例這頁可以在你的IE正常執行嗎?
    我在IE8看是正常可以循環運作的
    你再檢查一下看看

  • 洋小介 說:

    有阿~正常執行

    我家的版本是 : IE11

  • hsin 說:

    如果範例頁的可以正常執行
    那就是你的寫法可能有問題
    研究一下範例頁的寫法吧
    直接看該頁的網頁原始碼

  • 洋小介 說:

    ok~感謝您的耐心回答XDDD

  • 巴納納 說:

    想請問一下
    範例2跟範例3的圖片輪播
    跑完一輪就不會重複跑動了
    有辦法跑完一輪再接著重複跑嗎?

  • hsin 說:

    我這邊看都會重複跑,可能是你瀏覽器的原因。

  • 巴納納 說:

    好的 感謝您的回答~
    我用Google Chrome瀏覽是不會重複
    IE就會重複了
    那在詢問一下
    如果要讓它中途不間斷的捲動的話
    該調整那些地方呢?

  • hsin 說:

    IE 的問題很多,我不確定是什麼原因造成的。建議是找做好的套件作,那些套件都有較好的瀏覽器適應性,關鍵字是 carousel 。

  • 巴納納 說:

    非常感謝!
    因為急需要用到這種效果,
    然後網路上搜尋的marquee標籤
    在其他瀏覽器上也會有問題,
    所以很頭痛…

  • hsin 說:

    請不要再使用 marquee 標籤了,這在將近十年前的這篇文章發表時都已經有點過時,以現在來說更是已經作古了,各瀏覽器不支援也是理所當然的。請使用關鍵字”vertical carousel javascript”搜尋適合的套件,咕狗結果的第一頁就有很多可用的。

  • 發表迴響

    彙整

    分類