下面是详细的攻略:
要实现图片轮播跑马灯,需要考虑以下几个方面:
首先,我们需要定义好轮播图的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中定义好轮播图的样式,如下所示:
.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
,使它们水平排列。最后,左右箭头需要设置位置和颜色等样式。
最后,我们需要使用JavaScript来实现轮播图的自动滑动和手动切换功能等。
实现自动滑动的功能,可以使用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
属性值应用于轮播图的内容区域。
而手动切换图片可以通过给左右箭头添加事件监听,分别执行向上翻页和向下翻页的操作来实现。代码如下:
$('.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
属性值应用到轮播图的内容区域即可。
和很多轮播图一样,我们需要在鼠标移入时停止自动轮播,在鼠标移出时恢复轮播,可以通过给轮播图容器添加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>
下面是两个示例展示网址:
以上就是JS实现图片轮播跑马灯的完整攻略。
本文链接:http://task.lmcjl.com/news/9485.html