一、效果图

二、使用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);

}

CSS和jQuery分别实现图片无缝滚动效果的更多相关文章

  1. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  2. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  6. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  7. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  8. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

随机推荐

  1. 强烈推荐一款功能强大的Tomcat 管理监控工具

    专注于Java领域优质技术号,欢迎关注 原创: 侯树成 Tomcat那些事儿 启动 Tomcat完毕 ,有些时候总会打开浏览器 http://localhost:8080/ 去验证你的Tomcat是否 ...

  2. SqlServer 查询所有字段要写说明

    查询出所有未写说明的字段: SELECT IC.table_name TableName, ColName=C.name, PFD.[value] FROM sys.columns C INNER J ...

  3. 自定义 MessageBox 组件

    效果: 公共组件页面: js部分: <script>   export default {     props: {       title: {         type: String ...

  4. 小程序中使用async函数 会报 regeneratorRuntime is not defined的问题

    async await比Promise更好的解决异步操作问题,但是在小程序中直接使用会出现以下的错误提示 是因为缺少了regeneratorRuntime这个模块,需要从外部引入 1.在新建的文件夹中 ...

  5. 【知识强化】第四章 网络层 4.8 移动IP

    这节课我们来学习一下移动IP. 那移动IP呢要跟动态IP区分开.动态IP是指,通过使用DHCP协议,在一个局域网内部的一台主机,就可以动态地获得一个IP地址.那这里面的移动IP是什么意思呢? 我们来举 ...

  6. Winsock编程原理——面向连接

    Winsock编程原理——面向连接 Windows Sockets使用套接字进行编程,套接字编程是面向客户端/服务器模型而设计的,因此系统中需要客户端和服务器两个不同类型的进程,根据连接类型的不同,对 ...

  7. 2019HDU多校第一场 String 贪心

    题意:给你一个字符串,问是否存在一个长度为m的子序列,子序列中对应字符的数目必须在一个范围内,问是否存在这样的字符串?如果存在,输出字典序最小的那个. 思路:贪心,先构造一个序列自动机,序列自动机指向 ...

  8. MUI 自定义从底部弹出的弹出框内容

    最近做的项目都是在使用mui做手机网页,大致是下面的这种弹出效果 首先,引入 mui.css或者mui.min.css 引入 mui.min.js或者mui.js 第二步:<a href=&qu ...

  9. bootstrap的模态框的使用

    bootstrap的模态框 如果只想单独使用模态框功能,可以单独引入modal.js,和bootstrap的css,在bootstrap的包中,可引入bootstrap.js. 用法 通过data属性 ...

  10. ios和android适配

    一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点 ...