JS、CSS图片流动轮播效果动画鼠标hover后暂停动画（左右、上下滚动）

 例一：css实现（左右滚动）

<!--轮播图-->
<div class="carousel">
    <div class="imgList">
        <img src="index/images/home/carousel1.png"/>
        <img src="index/images/home/carousel2.png"/>
        <img src="index/images/home/carousel3.png"/>
        <img src="index/images/home/carousel4.png"/>
        <img src="index/images/home/carousel5.png"/>
        <img src="index/images/home/carousel6.png"/>
        <img src="index/images/home/carousel1.png"/>
        <img src="index/images/home/carousel2.png"/>
        <img src="index/images/home/carousel3.png"/>
        <img src="index/images/home/carousel4.png"/>
        <img src="index/images/home/carousel5.png"/>
        <img src="index/images/home/carousel6.png"/>
    </div>
</div>

 注意看图片：图片这里最好是准备两组一模一样的图片这样轮播滚动时就不会有间断↑↑↑↑↑↑↑（这个问题取决于你图片的多少，是否能够占满你所设置的div class="carousel"的宽度，然后相对应的计算@keyframes 里的滚动位置就可以了）

css：

/*轮播图*/
.carousel{
    width: 800px;//这里宽、高可以设置百分比
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border: 1px solid pink;
}
.carousel .imgList{
    //这里不用设置宽度，让宽度根据图片的多少，去自适应宽度
    height: 100%;
    animation: rolling 30s linear infinite;//调整滚动动画播放时间
    position: absolute;
    display: flex;
}
.carousel .imgList:hover{
    cursor: pointer;
    animation-play-state:paused;//滚动动画暂停
}
.carousel .imgList img{
    width: 288px;
    height: 100%;
    float: left;
    margin-right: 30px;
}
@keyframes rolling {
    from {
        transform: translateX(0);//调整滚动内容位置（开始）
    }
    to {
        //这里设置-50%因为是准备了两组一模一样的图片并且没有设置宽度，所以这里只需要滚动到中间的位置就可以了所以设置-50%
        transform: translateX(-50%);//调整滚动内容位置（结束）
    }
}

 

例二：JS实现（左右滚动）

<%--大致结构--%>
<div id="gcglzz">
    <%--ul宽度一定大于父级div的宽度--%>
    <ul id="gcglzzList">
        <li>
            <img src="../new/img/firstIndex/picture1.jpg" alt="" class="picture">
            <div class="text" title="" >《工程监理资质证书1》</div>
        </li>
        <li>
            <img src="../new/img/firstIndex/picture3.jpg" alt="" class="picture">
            <div class="text" title="" >《工程监理资质证书2》</div>
        </li>
        <li>
            <img src="../new/img/firstIndex/picture3.jpg" alt="" class="picture">
            <div class="text" title="" >《工程监理资质证书2》</div>
        </li>
    </ul>
</div>

       $(function(){
            //1、定义变量保存偏移量
            var offset=0;
            //2、让图片滚动
            var timer;
            //自动滚动
            function autoPlay(){
                 timer=setInterval(function(){
                    offset-=3
                    if(offset<=-1600){
                        offset=0
                    }
                    $('#gcglzzList').css('marginLeft',offset)
                },10)
            }
            autoPlay()

            //3、监听li的移入和移除事件
            $('#gcglzzList li').hover(function(){
                //鼠标悬浮后，停止滚动
                clearInterval(timer)
                //非当前选择设置半透明淡入蒙版，因为父级元素为黑色
                $(this).siblings().fadeTo(100,0.5)
                //去除当前选中的蒙版
                $(this).fadeTo(100,1)
            },function(){
                //继续滚动
                autoPlay()
                //去除所有蒙版
                $('#gcglzzList li').fadeTo(100,1)
            })
        })

例三：上下滚动

js用的是angularJS和jQuery写法差不多

<div id="review_box" style="width:100%;height:40px;overflow: hidden;">
    <ul id="comment1" style="list-style: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <ul id="comment2" style="list-style: none;"></ul>
</div>

$(function () {
    $scope.roll(60)

}); 
$scope.roll=function(t){
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("review_box");
        ul2.innerHTML = ul1.innerHTML;
        ulbox.scrollTop = 0; // 开始无滚动时设为0
        var timer = setInterval($scope.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        // 鼠标移入div时暂停滚动
        ulbox.onmouseover = function () {
            clearInterval(timer);
        }
        // 鼠标移出div后继续滚动
        ulbox.onmouseout = function () {
            timer = setInterval($scope.rollStart, t);
        }
}
$scope.rollStart=function(t){
        // 上面声明的DOM对象为局部对象需要再次声明
        var ul1 = document.getElementById("comment1");
        var ul2 = document.getElementById("comment2");
        var ulbox = document.getElementById("review_box");
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
}