1. Python技术站首页
  2. 其他
  3. JavaScript

JS实现图片轮播跑马灯

• JavaScript

下面是详细的攻略：

实现图片轮播跑马灯的思路

要实现图片轮播跑马灯，需要考虑以下几个方面：

  1. 轮播的图片需要在一定的时间内依次切换显示。
  2. 轮播所需的图片宽度需要和外层容器宽度一致，超出宽度的图片需要隐藏。
  3. 需要添加左右箭头，实现手动切换图片的功能。
  4. 需要在鼠标移入轮播图时停止自动轮播，在鼠标移出时恢复轮播。

实现图片轮播跑马灯的步骤

一、HTML结构

首先，我们需要定义好轮播图的HTML结构，例如下面是一个简单的例子：

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
  <div class="prev-btn">&lt;</div>
  <div class="next-btn">&gt;</div>
</div>

其中，外层的carousel是轮播图的容器，carousel-inner则是轮播图的内容区域。每个img标签代表一张轮播图。最后的prev-btn和next-btn分别是左右箭头。

二、CSS样式

接下来，我们需要在CSS中定义好轮播图的样式，如下所示：

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.carousel-inner {
  width: 300%;
  position: relative;
  transition: left 0.6s ease-in-out;
}
.carousel-inner img {
  width: 33.333%;
  float: left;
  display: block;
}
.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.prev-btn {
  left: 0;
}
.next-btn {
  right: 0;
}

其中，轮播图容器需要设置width和position属性。为了实现轮播效果，需要给轮播内容区域设置width属性为300%。因为轮播图会自动滑动，所以需要将轮播内容区域的left属性设置为负数的宽度，再和动画时间一同设置给transition属性，以实现轮播的效果。此外，每张轮播图片需要设置宽度为33.333%，并且设置float属性为left，使它们水平排列。最后，左右箭头需要设置位置和颜色等样式。

三、JS实现

最后，我们需要使用JavaScript来实现轮播图的自动滑动和手动切换功能等。

1. 自动滑动功能

实现自动滑动的功能，可以使用setInterval函数来定时修改轮播内容区域的left属性值，让轮播图自动向左滑动。代码如下：

var carouselInterval = setInterval(function () {
  var left = parseInt($('.carousel-inner').css('left')) || 0;
  left -= $('.carousel-inner img').eq(0).width();
  if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
    left = 0;
  }
  $('.carousel-inner').css('left', left);
}, 3000);

在上面的代码中，首先使用setInterval函数每3秒钟执行一次回调函数。回调函数里通过$('.carousel-inner').css('left')获取到当前内容区域的left属性值，并将其转换为整型后减去当前图片的宽度。如果到达最后一张图片，将left属性值设置为0，重新开始轮播。最后，通过$('.carousel-inner').css('left', left)将修改后的left属性值应用于轮播图的内容区域。

2. 手动切换功能

而手动切换图片可以通过给左右箭头添加事件监听，分别执行向上翻页和向下翻页的操作来实现。代码如下：

$('.prev-btn').click(function () {
  var left = parseInt($('.carousel-inner').css('left')) || 0;
  left += $('.carousel-inner img').eq(0).width();
  if (left > 0) {
    left = -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width();
  }
  $('.carousel-inner').css('left', left);
});

$('.next-btn').click(function () {
  var left = parseInt($('.carousel-inner').css('left')) || 0;
  left -= $('.carousel-inner img').eq(0).width();
  if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
    left = 0;
  }
  $('.carousel-inner').css('left', left);
});

在上面的代码中，左右箭头分别绑定click事件回调函数。回调函数里通过$('.carousel-inner').css('left')获取到当前内容区域的left属性值，并根据点击的箭头执行对应的加减操作。最后再将修改后的left属性值应用到轮播图的内容区域即可。

3. 鼠标滑过/离开事件

和很多轮播图一样，我们需要在鼠标移入时停止自动轮播，在鼠标移出时恢复轮播，可以通过给轮播图容器添加mouseenter和mouseleave两个事件来实现。代码如下：

$('.carousel').on('mouseenter', function () {
  clearInterval(carouselInterval);
}).on('mouseleave', function () {
  carouselInterval = setInterval(function () {
    var left = parseInt($('.carousel-inner').css('left')) || 0;
    left -= $('.carousel-inner img').eq(0).width();
    if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
      left = 0;
    }
    $('.carousel-inner').css('left', left);
  }, 3000);
});

在上面的代码中，当鼠标移入轮播图容器时，使用clearInterval函数清除自动轮播计时器即可。当鼠标移出时，重新开始自动轮播计时器即可，在此处需要将回调函数赋值给变量carouselInterval。这样，就完成了图片轮播跑马灯的实现。

四、完整代码示例

下面是一个完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播跑马灯</title>
    <style>
        .carousel {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .carousel-inner {
            width: 300%;
            position: relative;
            transition: left 0.6s ease-in-out;
        }

        .carousel-inner img {
            width: 33.333%;
            float: left;
            display: block;
        }

        .prev-btn,
        .next-btn {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 30px;
            margin-top: -15px;
            font-size: 20px;
            color: #fff;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        .prev-btn {
            left: 0;
        }

        .next-btn {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <img src="image1.jpg" alt="">
            <img src="image2.jpg" alt="">
            <img src="image3.jpg" alt="">
        </div>
        <div class="prev-btn">&lt;</div>
        <div class="next-btn">&gt;</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script>
        var carouselInterval = setInterval(function () {
            var left = parseInt($('.carousel-inner').css('left')) || 0;
            left -= $('.carousel-inner img').eq(0).width();
            if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
                left = 0;
            }
            $('.carousel-inner').css('left', left);
        }, 3000);

        $('.prev-btn').click(function () {
            var left = parseInt($('.carousel-inner').css('left')) || 0;
            left += $('.carousel-inner img').eq(0).width();
            if (left > 0) {
                left = -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width();
            }
            $('.carousel-inner').css('left', left);
        });

        $('.next-btn').click(function () {
            var left = parseInt($('.carousel-inner').css('left')) || 0;
            left -= $('.carousel-inner img').eq(0).width();
            if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
                left = 0;
            }
            $('.carousel-inner').css('left', left);
        });

        $('.carousel').on('mouseenter', function () {
            clearInterval(carouselInterval);
        }).on('mouseleave', function () {
            carouselInterval = setInterval(function () {
                var left = parseInt($('.carousel-inner').css('left')) || 0;
                left -= $('.carousel-inner img').eq(0).width();
                if (left < -($('.carousel-inner img').length - 3) * $('.carousel-inner img').eq(0).width()) {
                    left = 0;
                }
                $('.carousel-inner').css('left', left);
            }, 3000);
        });
    </script>
</body>
</html>

五、示例展示

下面是两个示例展示网址：

  1. 第一个实例：https://codepen.io/pengfei_chen/pen/YzVWRKL
  2. 第二个实例：https://codepen.io/pengfei_chen/pen/OJMmGJM

以上就是JS实现图片轮播跑马灯的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现图片轮播跑马灯 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js生成随机数的方法实例

    针对“js生成随机数的方法实例”，我将给出一份 Markdown 格式的完整攻略，包含以下内容： JS生成随机数的方法实例 需求描述 在 JavaScript 中，有时候需要生成一个随机数，比如在游戏开发中，需要随机生成一个游戏道具的数量，或者在网页上点击按钮后，需要随机显示某个图片，等等。因此，了解如何在 JavaScript 中生成随机数是很有必要的。 …

    JavaScript 2023年6月10日
    00

  • JavaScript String.replace函数参数实例说明

    JavaScript中的String.replace()函数通常用于替换文本内容，其参数包括要替换的内容、替换的新内容和可选的标志属性。 下面是一个示例代码，说明replace()函数的基本用法： let str = "Hello World!"; let newStr = str.replace("World", &…

    JavaScript 2023年5月28日
    00

  • 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码

    首先，需要了解一下jQuery的$.cookie()方法，它是用来操作cookie的轻量级插件，可以很方便地对cookie进行创建、读取和删除等操作。在这里，我们将利用$.cookie()方法来实现跨越页面tabs导航的功能。 引入jQuery和jQuery Cookie插件 在HTML页面中需要先引入jQuery和jQuery Cookie插件的JS文件。…

    JavaScript 2023年6月11日
    00

  • jquery.validate使用时遇到的问题

    下面是详细讲解jquery.validate使用时遇到的问题的攻略： 问题描述 在使用jquery.validate进行表单验证时，可能会遇到以下几个问题:1. 表单重复提交；2. 校验失败时无法获取错误信息；3. 重置表单时无法清除样式。 解决方案 1. 表单重复提交 为了避免用户重复提交表单，我们需要在第一次提交之后就禁用提交按钮。可以通过以下代码实现：…

    JavaScript 2023年6月10日
    00

  • defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx，操作被中止”错误的解决方法

    当我们在HTML页面中引入JQuery时，可以给<script>标签添加一个defer属性，来告诉浏览器在文档解析完成后再加载并执行该JS文件。但是，如果在使用defer属性时，JS文件中存在依赖JQuery的代码，就会导致页面在加载时出现错误。 这里提供两种解决方法： 方法一：将defer移除或替换为async 解决问题的一种方法是将<s…

    JavaScript 2023年6月10日
    00

  • JavaScript里实用的原生API汇总

    JavaScript里实用的原生API汇总 什么是原生API？ 在 JavaScript 中，原生 API 是指可以直接在浏览器中使用的 JavaScript 函数和对象。它们已经被封装到浏览器中了，可以直接使用，无需安装额外的库或框架。 以下是一些常见的原生 API： DOM API：用于操作文档对象模型（DOM）的 API。 BOM API：用于操作浏览…

    JavaScript 2023年5月28日
    00

  • Javascript Date getUTCHours() 方法

    以下是关于JavaScript Date对象的getUTCHours()方法的完整攻略，包括两个示例说明。 JavaScript Date对象的getUTCHours()方法 JavaScript Date对象getUTCHours()方法返回当前日期的小时数，以协调世界（UTC）为基准。返回值是一个0到23之间的整数下面是使用Date对象的getUTCHo…

    JavaScript 2023年5月11日
    00

  • JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

    当统计JavaScript字符串长度时，需要注意中文和英文字符的不同处理方式，因为中文字符在Unicode编码中占两个字符的位置，而英文字符只占一个字符位置。 下面介绍几种方法来实现JavaScript中英文字符长度的统计。 方法一：正则表达式 使用正则表达式对中英文字符进行匹配，累加中文字符的个数，即可得到该字符串的长度。 function length(…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部