jQuery+CSS3自动轮播焦点图特效源码
以下是一个使用jQuery和CSS3创建自动轮播焦点图的示例代码:
HTML部分:
<div id="slider" class="slider">
<div class="slides">
<div class="slide" style="background-image: url('image1.jpg');"></div>
<div class="slide" style="background-image: url('image2.jpg');"></div>
<div class="slide" style="background-image: url('image3.jpg');"></div>
</div>
<div class="navigation">
<span class="nav-button active" data-index="0"></span>
<span class="nav-button" data-index="1"></span>
<span class="nav-button" data-index="2"></span>
</div>
</div>
CSS部分:
.slider {
position: relative;
overflow: hidden;
height: 400px;
}
.slides {
width: 300%;
height: 100%;
display: flex;
animation: slideShow 10s infinite;
}
.slide {
width: 100%;
flex: 1 0 auto;
background-size: cover;
background-position: center;
}
.navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.nav-button {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
opacity: 0.4;
transition: opacity 0.3s;
}
.nav-button.active {
opacity: 1;
}
@keyframes slideShow {
0% {
transform: translateX(0);
}
11.1%, 33.3% {
transform: translateX(0);
}
44.4%, 66.6% {
transform: translateX(-100%);
}
77.7%, 100% {
transform: translateX(-200%);
}
}
jQuery部分:
$(document).ready(function() {
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $navButtons = $slider.find('.nav-button');
$navButtons.click(function() {
var index = $(this).data('index');
$navButtons.removeClass('active');
$(this).addClass('active');
$slides.css('transform', 'translateX(-' + index + '00%)');
});
// 自动轮播功能
setInterval(function() {
var currentIndex = $navButtons.filter('.active').data('index');
var nextIndex = (currentIndex + 1) % $navButtons.length;
$navButtons.eq(nextIndex).trigger('click');
}, 5000);
});
这段代码实现了一个简单的自动轮播焦点图,其中包含了导航按钮和轮播效果。CSS动画slideShow
负责图片的切换,jQuery代码则处理了导航按钮的交互和自动轮播逻辑。
评论已关闭