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

下面我为你详细讲解如何实现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多简单无缝滚动代码(包含图文效果) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css为图片设置背景图片

    为图片设置CSS背景图片,通常需要使用CSS的background-image属性。以下是将图片设置为CSS背景图片的完整步骤: 1. 将图片上传到服务器 在设置CSS背景图片之前,您需要将图像上传到可访问的服务器上。在上传图像时,请记住其路径并将其用作CSS中背景图像的URL。 2. 使用background-image属性 使用background-im…

    css 2023年6月9日
    00
  • CSS预处理器scss/sass语法及使用教程

    CSS预处理器scss/sass语法及使用教程 CSS预处理是现代前端开发中常用的一种方式,它可以提高代码复用性和可维护性。有很多种CSS预处理器,其中比较流行的是scss或sass。本文将详细讲解scss和sass的语法和使用教程。 什么是scss/sass语法 scss和sass是两种流行的CSS预处理器,它们允许使用类似编程语言的语法来编写CSS代码。…

    css 2023年6月9日
    00
  • VUE实现分布式医疗挂号系统预约挂号首页步骤详情

    Vue实现分布式医疗挂号系统预约挂号首页步骤详情 背景 随着人们健康意识的增强,医疗行业的用户需求也日益增长。因此,设计并开发一款分布式医疗挂号系统预约挂号首页,使得用户可以方便快捷的找到自己想要的医院和科室,提高医疗行业的效率和服务质量。 步骤 1. 确定需求和功能 首先,我们需要确定需求和功能,包括页面设计、搜索功能、地图展示等。这可以通过对用户需求进行…

    css 2023年6月10日
    00
  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入CSS或者LESS文件的一些坑 在VueJS中,引入CSS或者LESS文件是非常常见的操作。然而,在实际开发中,可能会遇到一些坑,例如样式不生效、样式冲突等问题。本攻略将详细讲解VueJS如何引入CSS或者LESS文件的一些坑,包括基本用法、注意事项和示例说明。 1. 基本用法 在VueJS中,可以使用<style>标签或者&l…

    css 2023年5月18日
    00
  • javascript实现弹幕墙效果

    实现弹幕墙效果的步骤可以归纳为以下几点: 步骤一:准备工作 在HTML页面中添加一个<canvas>元素作为弹幕容器。可设置position: absolute和z-index属性,使其覆盖在其他内容之上。还需要在HTML页面中引入一个用于生成弹幕对象的JS文件。 <canvas id="Danmu" width=&qu…

    css 2023年6月10日
    00
  • js 本地预览的简单实现方法

    下面就为大家分享一下JS本地预览的简单实现方法。 如何实现JS本地预览 1. 安装浏览器插件 Chrome浏览器已经集成了一个本地预览的插件,我们可以直接在Chrome浏览器中打开本地HTML文件进行预览,但是其他浏览器可能不具备此功能,我们可以手动安装一个浏览器插件。目前比较常用的插件有“Live Server”和“Web Server for Chrom…

    css 2023年6月11日
    00
  • CSS解决浏览器的等宽空格问题

    CSS解决浏览器的等宽空格问题主要是为了解决单词间距不统一的问题,因为不同的字母和符号所占的宽度不同,在有些情况下,使用空格或者tab都无法让文字之间的距离完全一致。这里提供一些解决方案。 方案一:使用CSS属性 word-spacing CSS属性word-spacing可以控制文字之间的间隔。我们可以将值设为-1px,这样文字之间的间距就会缩小一个像素,…

    css 2023年6月9日
    00
  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS不间断横向滚动实现代码的攻略分为以下几个步骤: HTML布局 首先需要使用div标签创建一个包含所有滚动内容的容器,并设置样式overflow: hidden;,让容器内容不可见。 <div class="scroll-container"> <div class="scroll-conte…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部