实现缓冲无缝滚动图片轮播的HTML+JS代码示例,-优快云博客

本文链接：https://blog.youkuaiyun.com/zhou8622/article/details/130567500

直接上代码：

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

<head>
    <meta charset="UTF-8">
    <title>缓冲无缝滚动</title>
</head>


<body>
    <div id="box" style="overflow: hidden;position: relative;">
        <ul style="list-style: none;position: absolute;left: 0;top: 0;margin: 0;padding: 0;"></ul>
    </div>
</body>
<script type="text/javascript">
    (function(){
        var h = 100;
        var w = 300;
        var imgArr = [
            "aaa.jpeg",
            "bbb.jpeg",
            "ccc.jpeg",
            "ddd.jpeg"
        ];
        var linkArr = [
            "http://www.baidu.com",
            "http://www.baidu.com",
            "http://www.baidu.com",
            "http://www.baidu.com"
        ];

        var oBox = document.getElementById("box");
        oBox.style.width = w+'px';
        oBox.style.height = h + 'px';
        var oUl = oBox.children[0]
        oUl.style.width = (imgArr.length+1)*100+'%';

        for(var i=0;i<imgArr.length;i++){
            var lastLi = document.createElement("li");
            lastLi.style.float = 'left';
            lastLi.innerHTML = '<a href="'+linkArr[i]+'" target="_blank"><img src="'+imgArr[i]+'" style="width: '+w+'px;height: '+h+'px;vertical-align: top;"></a>';
            oUl.append(lastLi);
        }

        var lastLi = document.createElement("li");
        lastLi.style.float = 'left';
        lastLi.innerHTML = '<a href="'+linkArr[0]+'" target="_blank"><img src="'+imgArr[0]+'" style="width: '+w+'px;height: '+h+'px;vertical-align: top;"></a>';
        oUl.append(lastLi);

        var cur = 0;
        var timer = null;
        var target = 0;
        timer = setInterval(autoPlay, 2000);

        function autoPlay() {
            if (target <= -100*(imgArr.length)) {
                cur = 0;
                target = -100;
            } else {
                target -= 100;
            }
            var timer1 = null;
            timer1 = setInterval(autoPlay, 30);
            function autoPlay() { 
                if (cur == target) {
                    clearInterval(timer1)
                } else {
                    speed = (target - cur) / 7;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    cur = cur + speed; 
                    oUl.style.left = cur + "%";
                }
            }
        }
        oBox.onmouseover = function() {
            clearInterval(timer);
        }
        oBox.onmouseout = function() {
            timer = setInterval(autoPlay, 2000);
        }
    })()

</script>
</html>

JS轮播图