열린 웹 페이지는 기본적으로 Taobao 및 360 공식 웹 사이트 홈페이지와 같은 원활한 스크롤 또는 회전 목마 이미지가 표시됩니다.
이 회전식 이미지를 관찰하면 사진이 앞뒤로 전환 될 수 있다는 것을 알 수 있습니다. 어떻게해야합니까?
회전 목마 또는 원활한 스크롤을 달성하는 두 가지 주요 방법이 있습니다. 하나는 그림의 빛과 어둠, 즉 투명한 그림을 바꾸어 그림을 표시하거나 숨기는 것입니다. 다른 하나는 움직이는 프레임을 통해 보이는 영역에 그림을 표시하는 것입니다. 두 방법 모두 같은 것을 타이머로 사용합니다.
JavaScript에는 두 가지 유형의 타이머가 있습니다. 1.SetInterVal (); 2. 세트 타임 아웃 (); TIMERS를 닫는 방법의 두 가지 방법 인 ClearInterVal () 및 Cleartimeout ()도 있습니다. 두 타이머의 차이점은 전자를 여러 번 실행할 수 있고 후자는 한 번만 실행할 수 있다는 것입니다.
이번에는 원활한 스크롤에 대해서만 이야기 할 것이며 다음 기사는 회전 목마 사진을 소개합니다.
간단한 원활한 스크롤링을 구현하려는 코드는 다음과 같습니다.
/*전체 코드* /<! docType html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {위치 : 상대; 폭 : 630px; 높이 : 220px; 테두리 : 고체 2px Black; Overflow : Hidden;} ul {위치 : 절대; 상단; 상단 : 10px; 왼쪽 : 0;} img {width : 200px; 높이 : 200px; float : 왼쪽; 마진 순간 : 10px; 테두리 : 2px 고체 노랑;} li {listyle; margin : 0; padding : 0;} ul {margin : 0; padding : 0;} </script> window OINPUT = document.getElementsByTagName ( "input") [0]; oul.innerhtml+= oul.innerhtml; oul.style.width = ali.length*ali [0] .ffsetWidth+"px"; var TIMER = null; setInterVal (function () {oul.style.left.left = oul.offsetleft-8+"px"; if (oul.offsetleft <-oul.offsetwidth/2) {oul.style.left = "0px";}}, 30);} </head> <div> <ul id = "> src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img/3.jpg "> </li> <li> src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </body> </html>/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
원활한 스크롤 레이아웃은 비교적 간단합니다. 다음은 주로 JS 내용을 설명합니다.
먼저 UL과 Li를 각각 얻은 다음 UL에서 컨텐츠를 복사하고 JS를 통해 UL의 너비를 동적으로 수정하고 (원활하게 위아래로 스크롤하고 너비를 수정하려면) 타이머를 켜십시오. 코드에서 UL은 30 마이크로 초마다 왼쪽으로 8 픽셀을 이동하고 UL의 가시 왼쪽 여백이 UL의 전체 길이의 절반 미만이면 0이됩니다. 컴퓨터가 매우 빨리 실행되기 때문에이 변경은 거의 불가능합니다. 우리가 보는 것은 왼쪽의 끝없는 움직임으로 끊임없이 움직이는 그림입니다.
위는 편집자가 소개 한 원활한 스크롤 JS 코드입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!