JS實現鼠標移上去圖片停止滾動移開恢復滾動效果

這是在做個人站的時候展示項目成果，因為不光需要展示，還需要介紹詳細內容，就在滾動展示的地方做了這個效果以便於點開想要看的項目。

首先，要做的是一個需要滾動的區域。我前邊寫過一個關於圖片循環滾動的示例，那個是一塊塊的的滾動==>實現圖片的循環滾動 .

這次我們就做滾動區域是平滑循環滾動效果。

下邊是布局的HTML代碼，原理是在要展示區域的div(.ban_img)里加一個能包含所有需要展示的圖的大div(.in_img),

<div class=" ban_img">
        <div class="in_img">
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
            <div class="inside inside5"></div>
            <div class="inside inside6"></div>
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
                            
        </div>
</div>

下邊是CSS樣式，我加的是背景圖，可跟實際情況選擇（圖片路徑根據實際位置修改）

.ban_img{
    height: 400px;
    .in_img{
        width: 3000px;
        background-color: blue;
        .inside{
            width: 300px;
            float: left;
            height: 400px;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            border: 3px solid #108A77;
        }
        .inside1{
            background-image: url(../img/binzhilang.png);
        }
        .inside2{
            background-image: url(../img/zhihui.png);
        }
        .inside3{
            background-image: url(../img/jredu.png);
        }
        .inside4{
            background-image: url(../img/sanyi.png);
        }
        .inside5{
            background-image: url(../img/cimply.png);
        }
        .inside6{
            background-image: url(../img/xingbake.png);
        }
    }
}

實現循環滾動的JS很簡單，為div（.in_img）加一個定時器就可以了,每10毫秒調整它的marginleft-1px,循環完一遍，計數器num清零

var scroll=document.getElementsByClassName("in_img");
var num=0;
var time=setInterval(function(){
    num--;
    scroll[0].style.marginLeft=num+"px";
    if(num<=-1800){
                num=0;
            }
},10);

這樣一來，平滑連續滾動的效果就可以實現了.

那么怎么實現標題所述效果呢？這也很簡單，為div(.in_img)綁定兩個事件來控制定時器就可以了。

首先添加鼠標移上去事件，來清除定時器

scroll[0].addEventListener("mouseover",function(){
    clearInterval(time);
});

然后添加鼠標移走事件，再恢復定時器

scroll[0].addEventListener("mouseout",function(){
    time=setInterval(function(){
        num--;
        scroll[0].style.marginLeft=num+"px";
        if(num<=-1800){
                    num=0;
                }
    },10);
})

這樣一來，大功告成！

功能簡單，代碼不難，但很實用。人工手打，辛苦給點個推薦吧^_^