> 웹 프론트엔드 > JS 튜토리얼 > Javascript를 사용하여 Images_javascript 기술을 원활하게 스크롤할 수 있습니다.

Javascript를 사용하여 Images_javascript 기술을 원활하게 스크롤할 수 있습니다.

WBOY
풀어 주다: 2016-05-16 16:29:00
원래의
1625명이 탐색했습니다.

JS의 원활한 스크롤 효과는 거의 모든 웹페이지에서 볼 수 있습니다. 일부 웹페이지에서는 플러그인을 사용할 수도 있습니다. 실제로 원본 자바스크립트를 사용하는 것은 비교적 간단합니다.

JS 위치 지식을 활용하는 것이 가장 중요합니다.

1.innerHTML: 요소의 html 태그를 설정하거나 가져옵니다.

2.scrollLeft: 개체의 왼쪽 가장자리와 창에 현재 표시되는 콘텐츠의 가장 왼쪽 끝 사이의 거리를 설정하거나 가져옵니다.

3.offsetWidth: 지정된 라벨의 너비를 설정하거나 가져옵니다

4.setInterval(): 정기적으로 시작하는 방법을 설정합니다

5.clearInterval() 타이머 지우기

렌더링:

미리보기: 데모

코드 복사 코드는 다음과 같습니다.




   
    javascript scroll制作



   

       

图片滚动制作


       

   

     

       

         

               

  •            

  •            

  •            
  •      
             

         

             

       

     

     
          
   

   


var Wrap=document.getElementById('wrap');
var list1=document.getElementById('list1');
var list2=document.getElementById('list2');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
//콘텐츠 목록 사본 생성
list2.innerHTML=list1.innerHTML;
//왼쪽으로 스크롤
함수 스크롤(){
If(wrap.scrollLeft>=list2.offsetWidth){
        Wrap.scrollLeft=0;
}
그렇지 않으면{
        Wrap.scrollLeft ;
}
}
타이머 = setInterval(scroll,1);
//마우스가 머무를 때 ClearInterval()
사용 Wrap.onmouseover=function(){
ClearInterval(타이머);
}
Wrap.onmouseout=function(){
타이머 = setInterval(scroll,1);
}
//왼쪽으로 가속
함수 스크롤_l(){
If(wrap.scrollLeft>=list2.offsetWidth){
        Wrap.scrollLeft=0;
}
그렇지 않으면{
        Wrap.scrollLeft ;
}
}
//오른쪽으로 스크롤
함수 스크롤_r(){
If(wrap.scrollLeft<=0){
        Wrap.scrollLeft =list2.offsetWidth;
}
그렇지 않으면{
        Wrap.scrollLeft--;
}
}  
prev.onclick=function(){
ClearInterval(타이머);
변경(0)
}
next.onclick=function(){
ClearInterval(타이머);
변경(1)
}
기능변경(r){
If(r==0){
       타이머 = setInterval(scroll_l,60);
         Wrap.onmouseout = function(){
        타이머 = setInterval(scroll_l,60);
}
}
만약(r==1){
       타이머 = setInterval(scroll_r,60);
         Wrap.onmouseout = function(){
        타이머 = setInterval(scroll_r,60);
}
}
}


매우 간결하고 실용적인 코드로, 친구들은 자신의 프로젝트 필요에 따라 적절하게 아름답게 꾸밀 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿