シームレスなスクロール効果を実現する js_javascript スキル

この記事の例では、シームレスなスクロール効果を実現するために js が必要とする関数と主要な js コードを紹介し、参考として共有します。具体的な内容は次のとおりです。

オペレーションレンダリング:

以下で学んだ知識と組み合わせて、模擬的な包括的な拡張演習を作成します~~ 一般的な機能は次のとおりです:

• 1. HTMLをクリックすると、画像が自動的に移動して表示されます
• 2. 左右の方向をクリックして画像の移動方向を変更します (左、正または負の値を変更します)
• 3. マウスが画像の内外に移動すると、画像は一時停止します (setInterval、clearInterval)
• 4. マウスを画像の上に移動し、強調表示します (a:hover)
• 5. 小さな写真をクリックすると、下の大きな写真が変わります
• 6. 画像が変化するとテキスト領域も変化します (失敗、改善の必要があります)

特定のコード:

window.onload = function(){

　　//声明部分( 现在的习惯是要写什么声明什么， 一起写容易搞忘了。。也不知道好不好这样)

　　var oDiv = document.getElementById('box');

　　var oUl = oDiv.getElementsByTagName('ul');

　　var oLi = oUl.getElementsByTagName('li');

　　var speed = 2;

　　var timer = null;

　　　

　　//让ul的内容增一倍，从而实现无缝滚动

　　oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

　　oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';

　　//move函数

　　function move(){
　　　　oUl.style.left = oUl.offsetLeft + speed + 'px';
　　　　//控制左
　　　　if(oUl.offsetLeft < -oUl.offsetWidth/2){
　　　　oUl.style.left = 0;
　　　　}

　　　　//控制右
　　　　if(oUl.offsetLeft > 0){
　　　　oUl.style.left = -oUl.offsetWidth/2 + 'px';
　　　　}

　　}

　　　　//图标点击~ 控制移动方向

　　　　var oLeft = document.getElementById('jt_left');
　　　　var oRight= document.getElementById('jt_right');

　　　　oLeft.onclick = function(){
　　　　speed = -2;
　　　　}

　　　　oRight.onclick = function(){
　　　　speed = 2;
　　　　}

　　　　//鼠标移入移出效果

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

　　　　oDiv.onmouseout = function(){
　　　　　　timer = setInterval(move,20);
　　　　}
　　　　timer = setInterval(move,20); 

　　　　//点击获取大图

　　　　

　　　　var aA = oDiv.getElementsByTagName('a');
　　　　for(var i=0;i<aA.length;i++){
　　　　　　aA[i].onclick = function(){
　　　　　　　　showPic(this);
　　　　　　　　return false;
　　　　　　}
　　　　}
　　　　
　　　　function showPic(whichpic){
　　　　　　var source = whichpic.href;
　　　　　　var placeholder = document.getElementById('placeholder');
　　　　　　placeholder.src = source;
　　　　}

}

最後のテキスト置換エフェクトでは、テキストボックスに対応する数字を画像を使用して変更したかったのですが、原因がわかりません。この点はまだ改善する必要があります。いくつかの良い提案を提供してください。ただし、js でのシームレスなスクロールはまだ正常に実装されています。これが皆さんのお役に立てれば幸いです。