JS实现图片轮播跑马灯

下面是详细的攻略：

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

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

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

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

一、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>

五、示例展示

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

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

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

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