使用js實現帶有停頓效果的圖片滾動（按鈕控制）

-Advertisement-

這種效果的具體效果是滑鼠移上去滾動停止，移出滾動，滾動時是一張一張圖片的滾動，即滾動一張之後停2s開始滾動下一張，具體內容請大家參考代碼。 ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無縫滾動2</title>
    <style>
    #warp{
        width: 1250px;
        height: 300px;
        overflow: hidden;
        margin:100px auto 0;
        overflow-x: auto;
    }
    #warp #con{
        width: 4000px;
        height: 300px;
        overflow: hidden;
    }
    #warp #con #box1{
         float: left;
         overflow: hidden;
    }
    #warp #con #box2{
         float: left;
         overflow: hidden;
    }
    #warp img{
        float: left;
        margin-right: 10px;
        width: 200px;
        height: 300px;
    }
    .btn{
        text-align: center;
        margin-top: 10px;
    }
    .btn button{
        font-size: 16px;
    }
    </style>
</head>
<body>
    <div id="warp">
        <div id="con">
            <div id="box1">
                <img src="images/meinv1.jpg" alt="">
                <img src="images/meinv2.jpg" alt="">
                <img src="images/meinv3.jpg" alt="">
                <img src="images/meinv4.jpg" alt="">
                <img src="images/meinv5.jpg" alt="">
                <img src="images/meinv6.jpg" alt="">
            </div>
            <div id="box2"></div>
        </div>
    </div>
    <div class="btn">
        <button id="scrollL"><<左滾</button>
        <button id="scrollR">右滾>></button>
    </div>
    <script>
        var warp=document.getElementById('warp');
        var con=document.getElementById('con');
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        var img=box1.getElementsByTagName('img')[0];
        var scrollL=document.getElementById('scrollL');
        var scrollR=document.getElementById('scrollR');
        var timer1=null,timer2=null,flage=1;
        box2.innerHTML=box1.innerHTML;
        max=box1.clientWidth;
        imgmax=img.clientWidth+10;
        function scrollLeft(){
            flage=1;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft++;
                if (warp.scrollLeft>=max) {
                    warp.scrollLeft=0;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollLeft,5)
                    },2000)
                }
            },5)
        }
        function scrollRight(){
            flage=0;
            clearInterval(timer1);
            timer1=setInterval(function(){
                warp.scrollLeft--;
                if (warp.scrollLeft<=0) {
                    warp.scrollLeft=max;
                }
                if(warp.scrollLeft%imgmax==0){
                    clearInterval(timer1);
                    clearTimeout(timer2);
                    timer2=setTimeout(function(){
                        timer1=setInterval(scrollRight,5)
                    },2000)
                }
            },5)
        }
            scrollLeft();
        scrollL.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollLeft();
        }
        scrollR.onclick=function(){
            // clearInterval(timer1);
            // clearTimeout(timer2);
            scrollRight();
        }
        warp.onmouseenter=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
        }
        warp.onmouseleave=function(){
            clearInterval(timer1);
            clearTimeout(timer2);
            console.log(flage);
            if (flage) {scrollLeft();}
               else{scrollRight();}    
        }
    </script>
</body>
</html>

這種效果的具體效果是滑鼠移上去滾動停止，移出滾動，滾動時是一張一張圖片的滾動，即滾動一張之後停2s開始滾動下一張，具體內容請大家參考代碼。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

css判斷不同解析度顯示不同寬度佈局實現自適應寬度

一、CSS DIV網頁佈局中當解析度小於等於1024px（像素）時，DIV佈局對象顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用CSS實現改變瀏覽器顯示寬度從而實現佈局的網頁寬度動態改變變化（網頁寬度自動隨瀏覽器顯示寬度而變寬變窄）。隨著發展，越來越多的電腦用戶顯 ...
sass高級語法

github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass語法是: sass --watch test.scss:test.css --style expanded 如下圖: 1 導入外部文件,預設文件尾碼預設是sas ...
簡單的使用鍵盤控制方塊移動

...
簡單的碰壁反彈效果

可以使用js來實現簡單的碰壁反彈效果，具體的內容請大家參考代碼部分。其中movex和movey兩個變數是判斷運動的方向。 ...
HTML <a> 標簽

一，定義和用法所有瀏覽器都支持 <a> 標簽。 <a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。 <a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。在所有瀏覽器中，鏈接的預設外觀是：未被訪問的鏈接帶有下劃線而且是藍色的已被訪問的鏈接帶有下劃線而且是紫色的活動鏈接帶有下劃 ...
將一串字元串轉變為駝峰樣式（字元串練習）

一些簡單的字元串操作，歡迎大家參考學習。 ...
js控住DOM實現發佈微博簡單效果

這段代碼的效果具體是輸入標題和內容，點擊發佈把消息發佈出去，並使最新的消息始終在內容的最上面，代碼為：這段代碼主要運用了一些DOM節點操作的知識，純屬學習之餘練手作品，大家可以參考參考。 ...
使用js製作一般網站首頁圖片輪播效果

具體效果我是仿照hao123導航頁面圖片輪播的效果，大家可以去那個網站參考 ...