効果:
代:
复制番号代番号次のように:
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
#div1
{
幅: 245ピクセル;
高さ: 150ピクセル;
背景: 赤;
マージン: 250ピクセル;
マージン左: 500ピクセル;
位置: 絶対;
オーバーフロー: 非表示;
}
#div1 ウルリ
{
フロート: 左;
幅: 44ピクセル;
高さ: 66ピクセル;
マージントップ: 20px;
マージン右: 5px;
リストスタイル: なし。
}
#div1 ul
{
幅: 250ピクセル;
位置: 絶対;
パディング: 0;
}
</スタイル>
<script type="text/javascript">
window.onload = 関数 () {
var oul = document.getElementsByTagName('ul')[0];
var odiv = document.getElementById('div1');
var ali = document.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
関数 roll() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var タイマー = null;
タイマー = setInterval(roll, 30);
odiv.onmouseover = function () {
クリアインターバル(タイマー);
}
odiv.onmouseout = function () {
タイマー = setInterval(roll, 30);
}
};
</script>
</head>
<本文>
<div id="div1">
<ul>
<リ>
<img src="../Images/Number1/0.jpg" /></li>
<リ>
<img src="../Images/Number1/1.jpg" /></li>
<リ>
<img src="../Images/Number1/2.jpg" /></li>
<リ>
<img src="../Images/Number1/3.jpg" /></li>
<リ>
<img src="../Images/Number1/4.jpg" /></li>
</ul>
</div>
</body>