본 글의 예시에서는 js가 원활한 스크롤 효과를 구현하기 위해 필요한 기능과 주요 js 코드를 소개하고 있으며, 참고용으로 공유합니다
작업 렌더링:
아래에서 배운 지식을 조합하여 모의 종합 확장 운동을 만들어 보세요~~ 일반적인 기능은 다음과 같습니다.
특정 코드:
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의 원활한 스크롤은 여전히 모든 사람에게 도움이 될 수 있기를 바랍니다.