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

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

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

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

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

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

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

5.clearInterval() 타이머 지우기

렌더링:

미리보기: 데모

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

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        prev
     

     

        next
     

    
   

   

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);
}
}
}

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