用jquery实现京东首页轮播图效果 (源码分享)
以下是一个使用jQuery实现的简单京东首页轮播图效果的示例代码:
HTML部分:
<div class="jd-carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="image1.jpg"></div>
<div class="carousel-item"><img src="image2.jpg"></div>
<div class="carousel-item"><img src="image3.jpg"></div>
<!-- 更多轮播图项 -->
</div>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS部分:
.jd-carousel {
position: relative;
width: 100%;
margin: auto;
height: 400px; /* 轮播图高度 */
overflow: hidden;
}
.carousel-inner {
position: absolute;
width: 300%; /* 所有轮播图项的宽度 */
transition: transform 0.5s ease-in-out;
}
.carousel-item {
width: 100%;
float: left;
}
.carousel-item img {
width: 100%;
height: 400px; /* 与HTML中的高度一致 */
display: block;
}
.carousel-control-prev, .carousel-control-next {
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
display: none; /* 默认不显示 */
color: #fff;
font-size: 30px;
text-align: center;
line-height: 1;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.25);
}
.carousel-control-prev:hover, .carousel-control-next:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
jQuery部分:
$(document).ready(function() {
var $carouselItems = $('.carousel-inner .carousel-item');
var carouselItemCount = $carouselItems.length;
var currentIndex = 0;
// 显示第一张图片
$carouselItems.eq(currentIndex).addClass('active');
// 轮播图切换函数
function slideTo(index) {
var currentItem = $carouselItems.eq(currentIndex);
var nextItem = $carouselItems.eq(index);
currentItem.removeClass('active').css('left', '');
nextItem.addClass('active');
var offset = -nextItem.index() * 100;
$('.carousel-inner').css('transform', 'translateX(' + offset + '%)');
currentIndex = index;
}
// 初始化时显示控制按钮
$('.jd-carouse
评论已关闭