下面是详细的攻略：
实现图片轮播跑马灯的思路
要实现图片轮播跑马灯，需要考虑以下几个方面：
- 轮播的图片需要在一定的时间内依次切换显示。
- 轮播所需的图片宽度需要和外层容器宽度一致，超出宽度的图片需要隐藏。
- 需要添加左右箭头，实现手动切换图片的功能。
- 需要在鼠标移入轮播图时停止自动轮播，在鼠标移出时恢复轮播。
实现图片轮播跑马灯的步骤
一、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"><</div>
<div class="next-btn">></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"><</div>
<div class="next-btn">></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技术站
微信扫一扫 
支付宝扫一扫 