jQuery实现滚动图

zeddme

于 2020-10-20 19:45:13 发布

阅读量946

点赞数

分类专栏： js 文章标签：列表 jquery css html

本文链接：https://blog.csdn.net/qq_44888570/article/details/109187639

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

滚动图，本例为4张图片循环滚动，鼠标悬停会将图片停止滚动，将其他图片来一个灰色遮罩，主要用到排他思想。为什么4张图片，我的图片列表为什么会有6张图片呢？其实第5,6张图片和第1,2张图片是完全一样的。如果不放这两张图片，无限滚动滚到第四张结束之后再跳回第一张图片时，会有一个空隙，闪一下。大家一做便知。
源码中的知识点笔者在前几篇博客中都有讲到。欢迎提问，留言私信都可，觉得不错点个赞吧~！

效果图

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无限滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 768px;
            height: 216px;
            border: 1px solid #000;
            margin: 200px auto;
            overflow: hidden;
        }

        .wrapper > ul {
            width: 2304px;
            height: 216px;
            list-style: none;
            background-color: #666;
        }

        .wrapper li {
            float: left;
        }

        .wrapper li > img {
            width: 384px;
            height: 216px;
        }

    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var ul = $('ul');
            var lis = $('li');
            var offset = 0;
            var offsetMax = parseInt($('img').css('width').substring(0, 3)) * 4;
            var timer = setInterval(autoPlay, 10);
            autoPlay();

            lis.hover(function () {
                clearInterval(timer);
                $(this).siblings().fadeTo(100, .5);
                $(this).fadeTo(100, 1);
            }, function () {
                timer = setInterval(autoPlay, 10);
                lis.fadeTo(100, 1);
            })

            function autoPlay() {
                offset -= 2;
                if (offset <= -offsetMax) {
                    offset = 0;
                }
                ul.css('marginLeft', offset);
            }
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul>
        <li><img src="img/tabl/wallhaven-139z5g.jpg" alt=""></li>
        <li><img src="img/tabl/wallhaven-dgl7rm.jpg" alt=""></li>
        <li><img src="img/tabl/Ebrsuz4XQAcHWoM.jpg" alt=""></li>
        <li><img src="img/tabl/EdsvmEqWoAI4nsp.jpg" alt=""></li>
        <li><img src="img/tabl/wallhaven-139z5g.jpg" alt=""></li>
        <li><img src="img/tabl/wallhaven-dgl7rm.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

zeddme

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现滚动图

滚动图，本例为4张图片循环滚动，鼠标悬停会将图片停止滚动，将其他图片来一个灰色遮罩，主要用到排他思想。为什么4张图片，我的图片列表为什么会有6张图片呢？其实第5,6张图片和第1,2张图片是完全一样的。如果不放这两张图片，无限滚动滚到第四张结束之后再跳回第一张图片时，会有一个空隙，闪一下。大家一做便知。源码中的知识点笔者在前几篇博客中都有讲到。欢迎提问，留言私信都可，觉得不错点个赞吧~！效果图源码<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫

专栏目录