リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード

説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。
1. キーコード: javascript:

コードをコピー

コードは次のとおりです。

2. コード例: 完全なコード (実行可能)

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>円形スクロール情報バー</title>
<スタイルタイプ="text/css">
体{
マージン:0px;
パディング:0px;
}
#エクスプレスli{
高さ:25px;
ボーダー下部:破線 1px #999;
行の高さ:20px;
フォントサイズ:12px;
リストスタイル:なし;
}
＃ドーム{
高さ:305px;
オーバーフロー:非表示;
上マージン:0px;
}
#ブッククラス{
幅:200px;
高さ:310px;
境界線:3px 実線 #999;
左マージン:自動;
右マージン:自動;
上マージン:70px;
境界線の半径:5px 5px 5px 5px;
ボックスの影:0px 0px 10px 10px #CECED1;
}
＃急行{
左マージン:-30px;
右マージン:10px;
マージン下部:0px;
上マージン:0px;
}
#book_class div div ul li a{
テキスト装飾:なし;
色:#333333;
}
#book_class div div ul li a:hover{
テキスト装飾:下線;
}
</スタイル>
</head>
<本文>
<div id="book_class">
<div id="ドーム">
<div id="dome1">
<ul id="エクスプレス">
<li><a href="#">·2010 年度大学院英語シラバスが 25% オフで入荷しました...</a></li>
<li><a href="#">·四大古典（人民文学）の権威ある版...</a></li>
<li><a href="#">·口承史の権威、唐徳剛氏…</a></li>
<li><a href="#">·袁偉民とスポーツ界：真実を語る...</a></li>
<li><a href="#">·近年の台湾：台湾海峡の両岸でセンセーションを巻き起こしている...</a></li>
<li><a href="#">· ベストセラー教材のおすすめ： 50 セットの美しい本...</a></li>
<li><a href="#">·2010 年度版法学修士課程 75 年度共同試験概要</a></li>
<li><a href="#">· 新刊およびベストセラーのコンピュータ書籍が 25% オフ</a></li>
<li><a href="#">·2009 年の子供たちに人気の本</a></li>
<li><a href="#">·フロイトの厳選作品が 59% オフ</a></li>

</div>
<div id="dome2"></div>
</div>
</div>

<script type="text/javascript">
var ドーム = document.getElementById("ドーム");
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed=50; //上向き回転の速度を設定する
dome2.innerHTML=dome1.innerHTML; //ノードをコピー
関数moveTop(){
ドーム1のオフセット高さ-ドームのスクロールトップ<=0の場合{
ドームのスクロールトップ=0;
}それ以外{
ドームのスクロールトップ++;
}
}
var myFunction = setInterval("moveTop()",speed);
dome.onmouseover=関数(){
クリア間隔(myFunction);
}
dome.onmouseout=関数(){
myFunction=setInterval(移動トップ、速度);
}
</スクリプト>
</本文>
</html>

3. インターフェースは次のとおりです。