js写图片无限循环跑马灯

最新推荐文章于 2022-08-22 14:45:44 发布

Cc.＇沐艿伊℡

最新推荐文章于 2022-08-22 14:45:44 发布

阅读量1.4k

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/qq_44899153/article/details/102786256

版权

web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

js写图片无限循环跑马灯

效果图
在这里插入图片描述
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .partner {
            text-align: center;
            padding: 25px 25px 0;
            position: relative;
            overflow: hidden;
            height: 240px;
        }

        .partner ul {
            width: 100%;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 100px;
            left: 0;
        }

        .partner ul::-webkit-scrollbar {
            width: 0px;
            background-color: transparent;
        }

        .partner ul li {
            width: 15%;
            position: relative;
            min-width: 100px;
            list-style: none;
        }

        .partner ul li img {
            width: 100%;
        }

        .partner ul li span {
            height: 35px;
            line-height: 35px;
            display: block;
            text-align: center;
            color: #ccc;
        }

        .partner ul li:hover span {
            background-color: #1976d1;
            color: #fff;
            font-size: 17px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="partner">
        <ul class="slide">
            <li>
                <div><img src="panpan.jpg" alt=""></div>
                <span>盼盼食品</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(8).png" alt=""></div>
                <span>达利园</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(9).png" alt=""></div>
                <span>顺丰</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(10).png" alt=""></div>
                <span>京东</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(11).png" alt=""></div>
                <span>人福药业</span>
                <div class="cover"></div>
            </li>
        </ul>
        <ul class="slide1">
            <li>
                <div><img src="panpan.jpg" alt=""></div>
                <span>盼盼食品</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(8).png" alt=""></div>
                <span>达利园</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(9).png" alt=""></div>
                <span>顺丰</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(10).png" alt=""></div>
                <span>京东</span>
                <div class="cover"></div>
            </li>
            <li>
                <div><img src="10(11).png" alt=""></div>
                <span>人福药业</span>
                <div class="cover"></div>
            </li>
        </ul>
    </div>
</body>
<script>
   var time = null;
$(function () {

    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    var flag = IsPC();
    window.index = 0;
    var width1 = $('.partner ul li').eq(0).outerWidth()
    if (flag) {
        var width = parseInt($('.partner').outerWidth(true));
        width += +(width - width1 * 5) / 4;
    } else {
        var width = width1 * 5 + 75;
    }
    $('.slide1').css('left', width)
    $('.slide').animate({ left: -width + "px" }, 30000, 'linear');
    $('.slide1').animate({ left: 0 + "px" }, 30000, 'linear');

    time =  setInterval(() => {
        width1 = $('.partner ul li').eq(0).outerWidth()
        if (flag) {
            width = parseInt($('.partner').outerWidth(true));
            width += +(width - width1 * 5) / 4;
        } else {
            width = width1 * 5 + 75;
        }
        if (window.index == 0) {
            $('.slide').animate({ left: width + "px" }, 0)
            $('.slide').animate({ left: 0 + "px" }, 30000, 'linear')
            $('.slide1').animate({ left: -width + "px" }, 30000, 'linear')
            window.index = 1;
        } else if (window.index == 1) {
            $('.slide1').animate({ left: width + "px" }, 0)
            $('.slide').animate({ left: -width + "px" }, 30000, 'linear')
            $('.slide1').animate({ left: 0 + "px" }, 30000, 'linear')
            window.index = 0;
        }
    }, 30000);


})


window.onunload = function(){
    clearInterval(time);
    delete time;
}
    </script>

</html>