Javascript を使用して、画像のシームレスなスクロールを簡単に実現_JavaScript スキル

js のシームレスなスクロール効果は、ほとんどすべての Web ページで見られますが、実際には、オリジナルの JavaScript を使用するのが比較的簡単です。

主なことは、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;
//左にスクロール
関数scroll(){
If(wrap.scrollLeft>=list2.offsetWidth){
Wrap.scrollLeft=0;
}
それ以外{
Wrap.scrollLeft ;
}
}
タイマー = setInterval(scroll,1);
//マウスが止まっているときはclearInterval()
を使用します Wrap.onmouseover=function(){
ClearInterval(タイマー);
}
Wrap.onmouseout=function(){
タイマー = setInterval(scroll,1);
}
//左に加速
関数scroll_l(){
If(wrap.scrollLeft>=list2.offsetWidth){
Wrap.scrollLeft=0;
}
それ以外{
Wrap.scrollLeft ;
}
}
//右にスクロール
関数scroll_r(){
If(wrap.scrollLeft wrap.scrollLeft =list2.offsetWidth;
}
それ以外{
wrap.scrollLeft--;
}
}
prev.onclick=function(){
ClearInterval(タイマー);
変更(0)
}
next.onclick=function(){
ClearInterval(タイマー);
変更(1)
}
関数変更(r){
If(r==0){
timer = setInterval(scroll_l,60);
Wrap.onmouseout = function(){
timer = setInterval(scroll_l,60);
}
}
If(r==1){
timer = setInterval(scroll_r,60);
Wrap.onmouseout = function(){
timer = setInterval(scroll_r,60);
}
}
}

非常に簡潔で実用的なコードなので、友人は自分のプロジェクトのニーズに応じて適切に美しくすることができます。