下面是完整的攻略:
前置知识
在阅读本攻略前,你需要掌握基本的 HTML 和 CSS 技能,还要熟练掌握 JavaScript 中的 DOM 操作,了解一些简单的 jQuery 使用方法。
实现步骤
第一步:HTML 结构
首先,在页面中准备好需要轮播的图片和圆点标识的 HTML 结构,并设置好对应的 CSS 样式。
以下是一个简单的示例:
<div class="slider-container">
<div class="slider-wrapper">
<img src="images/1.jpg" alt="Slide 1" />
<img src="images/2.jpg" alt="Slide 2" />
<img src="images/3.jpg" alt="Slide 3" />
</div>
<div class="slider-dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
.slider-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
display: flex;
width: 300%;
height: 100%;
position: absolute;
transition: transform 0.5s ease-in-out;
}
.slider-wrapper img {
width: 33.33%;
height: 100%;
}
.slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.dot {
display: inline-block;
margin: 0 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.active {
background-color: #f00;
}
第二步:JavaScript 实现轮播
接下来,使用原生 JavaScript 实现轮播效果。以下是基本思路:
- 获取需要的 DOM 元素。
- 定义一个变量
slideIndex
来记录当前轮播的图片索引。 - 定义一个定时器,每隔一定时间自动轮播。
- 实现点击圆点标识来切换轮播的图片。
- 判断当前是否是最后一张图片,如果是则返回第一张图片。
最终的 JavaScript 代码如下:
// 获取元素
const container = document.querySelector('.slider-container');
const wrapper = document.querySelector('.slider-wrapper');
const dots = document.querySelectorAll('.dot');
// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;
// 自动轮播
setInterval(() => {
slideIndex++;
if (slideIndex > dots.length) {
slideIndex = 1;
}
moveSlides();
}, 3000);
// 圆点标识点击事件
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
slideIndex = index + 1;
moveSlides();
});
});
// 移动轮播图
function moveSlides() {
wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
dots.forEach((dot) => {
dot.classList.remove('active');
});
dots[slideIndex - 1].classList.add('active');
}
第三步:实现动态添加轮播图片
最后,我们还可以实现动态添加轮播图片的功能。以下是步骤:
- 定义一个数组存储图片路径。
- 使用
createElement
方法动态创建图片元素,并使用appendChild
方法添加到轮播图片容器中。 - 更新轮播图片的数量和圆点标识数量。
- 更新圆点标识的点击事件。
以下是示例代码:
// 图片路径
const slides = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
];
// 动态添加图片
slides.forEach((slide) => {
const img = document.createElement('img');
img.src = slide;
img.alt = 'Slide';
wrapper.appendChild(img);
});
// 更新变量和圆点标识数量
const dotsContainer = document.querySelector('.slider-dots');
const dotsHTML = [...dotsContainer.innerHTML];
for (let i = 0; i < slides.length; i++) {
const dot = document.createElement('span');
dot.classList.add('dot');
dotsContainer.appendChild(dot);
}
// 更新事件
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
slideIndex = index + 1;
moveSlides();
});
});
至此,就完成了原生 JavaScript 实现图片轮播效果代码的攻略。
示例说明
示例一: 实现轮播缩略图
以下是一个有轮播缩略图的完整代码示例:
<div class="slider-container">
<div class="slider-main">
<div class="slider-wrapper">
<img src="images/1.jpg" alt="Slide 1" />
<img src="images/2.jpg" alt="Slide 2" />
<img src="images/3.jpg" alt="Slide 3" />
<img src="images/4.jpg" alt="Slide 4" />
<img src="images/5.jpg" alt="Slide 5" />
</div>
<div class="slider-nav">
<div class="nav-wrapper">
<div class="nav-item">
<img src="images/1.jpg" alt="Slide 1" />
</div>
<div class="nav-item">
<img src="images/2.jpg" alt="Slide 2" />
</div>
<div class="nav-item">
<img src="images/3.jpg" alt="Slide 3" />
</div>
<div class="nav-item">
<img src="images/4.jpg" alt="Slide 4" />
</div>
<div class="nav-item">
<img src="images/5.jpg" alt="Slide 5" />
</div>
</div>
</div>
</div>
</div>
.slider-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slider-main {
position: relative;
width: 100%;
height: 100%;
}
.slider-wrapper {
display: flex;
width: 500%;
height: 100%;
position: absolute;
transition: transform 0.5s ease-in-out;
}
.slider-wrapper img {
width: 20%;
height: 100%;
}
.slider-nav {
position: absolute;
bottom: 10%;
width: 100%;
}
.nav-wrapper {
display: flex;
}
.nav-item {
margin-right: 10px;
cursor: pointer;
}
.nav-item img {
width: 50px;
height: 50px;
}
.active {
border: 2px solid #f00;
}
// 获取元素
const container = document.querySelector('.slider-container');
const main = document.querySelector('.slider-main');
const wrapper = document.querySelector('.slider-wrapper');
const navItems = document.querySelectorAll('.nav-item');
// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;
// 自动轮播
setInterval(() => {
slideIndex++;
if (slideIndex > navItems.length) {
slideIndex = 1;
}
moveSlides();
}, 3000);
// 缩略图点击事件
navItems.forEach((navItem, index) => {
navItem.addEventListener('click', () => {
slideIndex = index + 1;
moveSlides();
});
});
// 移动轮播图
function moveSlides() {
wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
navItems.forEach((navItem) => {
navItem.classList.remove('active');
});
navItems[slideIndex - 1].classList.add('active');
}
示例二: 实现响应式图片轮播
以下是一个响应式图片轮播的完整代码示例:
<div class="slider-container">
<div class="slider-wrapper">
<img src="images/1.jpg" alt="Slide 1" />
<img src="images/2.jpg" alt="Slide 2" />
<img src="images/3.jpg" alt="Slide 3" />
<img src="images/4.jpg" alt="Slide 4" />
<img src="images/5.jpg" alt="Slide 5" />
</div>
<div class="slider-buttons">
<button class="slider-prev">Prev</button>
<button class="slider-next">Next</button>
</div>
</div>
.slider-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider-wrapper {
display: flex;
width: 500%;
height: 100%;
position: absolute;
transition: transform 0.5s ease-in-out;
}
.slider-wrapper img {
width: calc(100% / 5);
height: 100%;
object-fit: cover;
}
.slider-buttons {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.slider-prev,
.slider-next {
padding: 10px;
background-color: #f00;
color: #fff;
border: none;
cursor: pointer;
}
.slider-prev {
margin-right: 10px;
}
// 获取元素
const container = document.querySelector('.slider-container');
const wrapper = document.querySelector('.slider-wrapper');
const prev = document.querySelector('.slider-prev');
const next = document.querySelector('.slider-next');
// 初始化变量
let slideIndex = 1;
const slideWidth = container.offsetWidth;
// 自动轮播
setInterval(() => {
slideIndex++;
if (slideIndex > wrapper.children.length) {
slideIndex = 1;
}
moveSlides();
}, 3000);
// 点击事件
prev.addEventListener('click', () => {
slideIndex--;
if (slideIndex < 1) {
slideIndex = wrapper.children.length;
}
moveSlides();
});
next.addEventListener('click', () => {
slideIndex++;
if (slideIndex > wrapper.children.length) {
slideIndex = 1;
}
moveSlides();
});
// 移动轮播图
function moveSlides() {
wrapper.style.transform = `translateX(-${slideWidth * (slideIndex - 1)}px)`;
}
以上两个示例分别实现了轮播缩略图和响应式图片轮播,希望对你有帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生javascript实现图片轮播效果代码 - Python技术站