シームレススクロールの改良版は、上下左右のスクロールをサポートします (関数にカプセル化されています)_JavaScript スキル

复制代 代码如下: 無缝滚動——上下 *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px auto;position:relative;} .btn{display:block;width:27px;height:27px;position:absolute;left:75px;} .up{background:url(images/up.gif);top:0;} .down{background:url(images/up.gif);top:490px;} .content{height:440px ;overflow:hidden;position:relative;top:40px;} .content ul{position:absolute;top:0;left:0;} .content li{height:110px;} &lt ;/style> window.onload = function(){ scroll('top',1,1000); }; scroll.js：

复制代码 代码如下: /********** 機能: 水平または垂直のシームレスなスクロールを実現 パラメータ: 方向、合計 4 つの値: 左、右、上、下 速度移動距離 iTime 動き始めるまでどれくらいかかりますか? 書かないとページ読み込み後に動き始めます **********/ functionscroll(direction,speed,iTime){ var oDiv = document.getElementById('scroll'); var oUl = oDiv. getElementsByTagName('ul')[0]; var aLi = oDiv.getElementsByTagName('li'); var aBtn = oDiv.getElementsByTagName('a'); var timer = null; var iSpeed = 0; var flag = true; // 判断水平移動は垂直移動

oUl.innerHTML = oUl.innerHTML;

switch(direction){ case 'left': iSpeed = -speed; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; flag = true; Break; case 'right': iSpe ed = 速度; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; flag = true; Break; case 'top': iSpe ed = -速度; flag = false; ブレーク; case 'bottom': iSpeed = 速度; flag = false; ブレーク; };

setTimeout(move,iTime);

//左按钮和上按钮 aBtn[0].onclick = function(){ clearInterval(timer); iSpeed = -speed; move(); };

//右按钮和下按钮 aBtn[1].onclick = function(){ clearInterval(timer); iSpeed = 速度; move(); };

oUl.onmouseover = function(){ clearInterval(timer); };

oUl .onmouseout = function(){ move(); };

HTML 構造は上記のような構造でなければならないことに注意してください。

シームレス スクロールの改良版は、上下左右のスクロールをサポートします (関数にカプセル化されています)_JavaScript スキル

シームレススクロールの改良版は、上下左右のスクロールをサポートします (関数にカプセル化されています)_JavaScript スキル