Loading

CSS和jQuery分别实现图片无缝滚动效果

一、效果图

二、使用CSS实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片无缝滚动</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            
            #con{
                width: 800px;
                margin: auto;
                margin-top: 100px;
                /* 超出div的部分隐藏 */
                overflow: hidden;
                height: 158px;
            }
            
            li{
                list-style: none;
                float: left;
                
            }
            
            img{
                width: 240px;
                height: 150px;
                margin: 5px;
                border-radius: 5px;
            }
            
            ul{
                width: 2500px;
            }
            
            /* 动画播放状态 */
            ul:hover{
                cursor: pointer;
                /* 当鼠标移动到图片上时动画停止 */
                animation-play-state:paused;
            }
            
            
            /* 实现动画 */
            #ul{
                /* 动画名称 ，在定义关键帧动画时需要使用*/
                animation-name: moveleft;
                
                /* 动画持续时间 */
                animation-duration: 10s;
                
                /* 设置动画速度曲线:线性 */
                animation-timing-function: linear;
                
                /* 动画的播放次数:无限次 */
                animation-iteration-count: infinite;
                
                /* 动画的奇偶轮流播放：奇数次正向播放，偶数次反向播放 */
                /* animation-direction: alternate; */
                
            }
            
            /* 定义关键帧动画 */
            @keyframes moveleft{
                /* ul从左边0位置到左边-1250px位置 */
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: -1250px;
                }
            }
            
        </style>
    </head>
    <body>
        <div id="con">
            <ul id="ul">
                <li><img src="../img/21.jpg" ></li>
                <li><img src="../img/22.jpg" ></li>
                <li><img src="../img/23.jpg" ></li>
                <li><img src="../img/24.jpg" ></li>
                <li><img src="../img/25.jpg" ></li>
                
                <li><img src="../img/21.jpg" ></li>
                <li><img src="../img/22.jpg" ></li>
                <li><img src="../img/23.jpg" ></li>
                <li><img src="../img/24.jpg" ></li>
                <li><img src="../img/25.jpg" ></li>
            </ul>
        </div>
    </body>
</html>

 

三、使用jQuery实现

HTML和css代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片无缝滚动</title>
        <script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/图片无缝滚动.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #con{
                width: 800px;
                margin: auto;
                margin-top: 100px;
                overflow: hidden;
                height: 158px;
            }
            li{
                list-style: none;
                float: left;
                
            }
            img{
                width: 240px;
                height: 150px;
                margin: 5px;
                border-radius: 5px;
            }
            ul{
                width: 2500px;
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <div id="con">
            <ul id="ul">
                <li><img src="../img/21.jpg" ></li>
                <li><img src="../img/22.jpg" ></li>
                <li><img src="../img/23.jpg" ></li>
                <li><img src="../img/24.jpg" ></li>
                <li><img src="../img/25.jpg" ></li>
                <li><img src="../img/10.jpg" ></li>
                
                <li><img src="../img/21.jpg" ></li>
                <li><img src="../img/22.jpg" ></li>
                <li><img src="../img/23.jpg" ></li>
                <li><img src="../img/24.jpg" ></li>
                <!-- <li><img src="../img/25.jpg" ></li> -->
            </ul>
        </div>
    </body>
</html>

 

js代码：

var move;
var lv = 0;
$(function() {
    
    //第一种方法
    //move = setInterval("moveLeft()", 5);
    
    //第二种方法
    move();
    
});

//方法一
function moveLeft() {
    var ul = $("ul");
    var li = $("li");
    lv += 1;
    //获取ul的左边距
    if (lv > 1500) {
        lv = 0;
    }
    $("ul").css("margin-left", -lv + "px");
    
    ul.mouseover(function(){
        $("ul").css({"animationPlayState":"paused"});
    })
    
}

//方法二
function move(){
    
    //鼠标移入移出事件
    $("ul").mouseover(function(){
        $(this).stop(true);
    });
    
    $("ul").mouseout(function(){
        move();
    });
    
    //获取ul绑定动画往左移动
    $("ul").animate({marginLeft:-1500},3000);
    $("ul").animate({marginLeft:0},0,move);
        
}

 

 

 

 

 

 

 

 

posted @ 2019-11-21 15:55  dBevil  阅读(763)  评论(0)  编辑  收藏  举报