沃梦达 / 编程技术 / 前端开发 / 正文

JS实现的N多简单无缝滚动代码(包含图文效果)

前端开发
2024-04-04

下面我为你详细讲解如何实现JS的无缝滚动代码。

下面我为你详细讲解如何实现JS的无缝滚动代码。

一、准备工作

在开始之前，我们需要准备以下材料：

  1. 一份文本编辑器，比如Sublime Text、VSCode等等；
  2. 用于展示滚动效果的HTML页面；
  3. JS代码文件。

二、步骤分解

下面我们将这个过程分解成几个步骤：

1.创建HTML页面

首先，我们需要创建一个HTML页面，用于展示我们的滚动效果。我们可以在页面中添加一些文本或图片，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝滚动示例</title>
</head>
<body>
    <div id="wrap">
        <div id="main">
            <img src="http://placehold.it/400x200&text=1" alt="">
            <img src="http://placehold.it/400x200&text=2" alt="">
            <img src="http://placehold.it/400x200&text=3" alt="">
            <img src="http://placehold.it/400x200&text=4" alt="">
            <img src="http://placehold.it/400x200&text=5" alt="">
        </div>
    </div>
</body>
</html>

如上，我们在页面中包含了一个id为wrap的div和一个id为main的div，其中id为wrap的div用于实现边框和布局，id为main的div是我们实现滚动效果的主要容器，其中包含了若干个img标签，用于展示图片。

2.样式设置

接下来我们需要设置一些样式，让页面的显示更加美观。我们可以在head标签中添加一些CSS代码，如下所示：

<style type="text/css">
    #wrap {
        width: 400px;
        height: 250px;
        margin: 0 auto;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    #main {
        width: 1250px;
        position: relative;
    }
    #main img {
        float: left;
    }
</style>

如上所示，我们对wrap和main分别设置了宽高、边框、位置和滚动相关的样式，对img则进行了浮动设置。

3.编写JS代码

接下来，我们需要编写JS代码来实现无缝滚动的效果。我们可以在页面中添加以下代码：

<script type="text/javascript">
    var timer = setInterval(autoPlay, 3000);

    function autoPlay(){
        if(parseInt(document.getElementById('main').style.left) % -400 > 0){
            var l = parseInt(document.getElementById('main').style.left) - parseInt(document.getElementById('main').style.left) % 400 - 400;
        }else{
            var l = parseInt(document.getElementById('main').style.left) - parseInt(document.getElementById('main').style.left) % 400;
        }
        animate(l);
    }

    function animate(offset){
        var time = 300;          //位移总时间
        var interval = 10;          //位移间隔时间
        var speed = offset/(time/interval);          //每次位移量

        var targetLeft = parseInt(document.getElementById('main').style.left) + offset;

        function go(){
            if((speed > 0 && parseInt(document.getElementById('main').style.left) < targetLeft) || (speed < 0 && parseInt(document.getElementById('main').style.left) > targetLeft)) {
                document.getElementById('main').style.left = parseInt(document.getElementById('main').style.left) + speed + 'px';
                setTimeout(go, interval);
            }else {
                document.getElementById('main').style.left = targetLeft + 'px';
                if(targetLeft > -200) {
                    document.getElementById('main').style.left = -1000 + 'px';
                }
                if(targetLeft < -1000) {
                    document.getElementById('main').style.left = '-200px';
                }
            }
        }
        go();
    }

    window.onload = function(){
        document.getElementById('main').onmouseover = function(){
            clearInterval(timer);
        }
        document.getElementById('main').onmouseout = function(){
            timer = setInterval(autoPlay, 3000);
        }
    }
</script>

如上代码所示，我们定义了一个定时器，在定时器中调用animate()函数来实现无缝滚动效果。animate()函数中，我们使用了setTimeout()方法来模拟位移，从而实现动画效果。

4.完整代码

最后，我们需要将上述代码整合成一个完整的HTML文件，并在浏览器中预览效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝滚动示例</title>
    <style type="text/css">
        #wrap {
            width: 400px;
            height: 250px;
            margin: 0 auto;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        #main {
            width: 1250px;
            position: relative;
        }
        #main img {
            float: left;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            <img src="http://placehold.it/400x200&text=1" alt="">
            <img src="http://placehold.it/400x200&text=2" alt="">
            <img src="http://placehold.it/400x200&text=3" alt="">
            <img src="http://placehold.it/400x200&text=4" alt="">
            <img src="http://placehold.it/400x200&text=5" alt="">
        </div>
    </div>

    <script type="text/javascript">
        var timer = setInterval(autoPlay, 3000);

        function autoPlay(){
            if(parseInt(document.getElementById('main').style.left) % -400 > 0){
                var l = parseInt(document.getElementById('main').style.left) - parseInt(document.getElementById('main').style.left) % 400 - 400;
            }else{
                var l = parseInt(document.getElementById('main').style.left) - parseInt(document.getElementById('main').style.left) % 400;
            }
            animate(l);
        }

        function animate(offset){
            var time = 300;          //位移总时间
            var interval = 10;          //位移间隔时间
            var speed = offset/(time/interval);          //每次位移量

            var targetLeft = parseInt(document.getElementById('main').style.left) + offset;

            function go(){
                if((speed > 0 && parseInt(document.getElementById('main').style.left) < targetLeft) || (speed < 0 && parseInt(document.getElementById('main').style.left) > targetLeft)) {
                    document.getElementById('main').style.left = parseInt(document.getElementById('main').style.left) + speed + 'px';
                    setTimeout(go, interval);
                }else {
                    document.getElementById('main').style.left = targetLeft + 'px';
                    if(targetLeft > -200) {
                        document.getElementById('main').style.left = -1000 + 'px';
                    }
                    if(targetLeft < -1000) {
                        document.getElementById('main').style.left = '-200px';
                    }
                }
            }
            go();
        }

        window.onload = function(){
            document.getElementById('main').onmouseover = function(){
                clearInterval(timer);
            }
            document.getElementById('main').onmouseout = function(){
                timer = setInterval(autoPlay, 3000);
            }
        }
    </script>
</body>
</html>

三、示例说明

以上是一个比较基础的无缝滚动示例，如果想要定制更加丰富的滚动效果，可以根据需求对样式和JS代码进行调整。

下面是另一个示例，展示了如何在列表中滚动展示文本内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝滚动示例2</title>
    <style type="text/css">
        #wrap {
            width: 400px;
            height: 250px;
            margin: 0 auto;
            border: 1px solid #ccc;
            overflow: hidden;
            position: relative;
        }
        #list {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
        }
        #list li {
            width: 400px;
            height: 250px;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        #list li:first-child {
            display: block;
        }
        #list li p {
            margin: 0;
            padding: 20px;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0,0,0,0.5);
        }
        #page {
            position: absolute;
            right: 20px;
            bottom: 0;
            font-size: 0;
            z-index: 2;
        }
        #page span {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        #page span.active {
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul id="list">
            <li><p>这是一条测试文本1</p></li>
            <li><p>这是一条测试文本2</p></li>
            <li><p>这是一条测试文本3</p></li>
            <li><p>这是一条测试文本4</p></li>
            <li><p>这是一条测试文本5</p></li>
        </ul>
        <div id="page">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script type="text/javascript">
        var index = 0;
        var timer = setInterval(autoPlay, 3000);
        var liList = document.getElementById('list').getElementsByTagName('li');
        var spanList = document.getElementById('page').getElementsByTagName('span');

        function autoPlay(){
            index++;
            index = index >= liList.length ? 0 : index;
            changeImg(index);
        }

        function changeImg(curIndex){
            for(var i = 0; i < liList.length; i++){
                liList[i].style.display = 'none';
                spanList[i].className = '';
            }
            liList[curIndex].style.display = 'block';
            spanList[curIndex].className = 'active';
        }

        for(var i = 0; i < spanList.length; i++) {
            spanList[i].index = i;
            spanList[i].onclick = function() {
                clearInterval(timer);
                index = this.index;
                changeImg(index);
                timer = setInterval(autoPlay, 3000);
            }
            document.getElementById('wrap').onmouseover = function(){
                clearInterval(timer);
            }
            document.getElementById('wrap').onmouseout = function(){
                timer = setInterval(autoPlay, 3000);
            }
        }
    </script>
</body>
</html>

如上所示，我们使用了一些CSS样式来实现文本内容的滚动效果，并在列表下方添加了几个圆点按钮，用于用户手动切换显示的文本内容。同时，我们也对JS代码进行了一些改动，使其符合我们的需求。

本文标题为：JS实现的N多简单无缝滚动代码(包含图文效果)

上一篇： CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
下一篇： CSS3实现左上角或右上角显示提醒圆点的示例代码

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2