50 天学习 50 个项目 - HTMLCSS and JavaScript
day35-Image Carousel(图片轮播图简易版)
效果
文章来源地址https://www.toymoban.com/news/detail-600951.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Carousel</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 轮播图 -->
<div class="carousel">
<!-- 图片容器 -->
<div class="image-container" id="imgs">
<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
alt="first-image" />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
alt="second-image" />
<img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
alt="third-image" />
<img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"
alt="fourth-image" />
</div>
<!-- 按钮-->
<button id="left" class="btn"><</button>
<button id="right" class="btn">></button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
body {
/* background: url('https://source.unsplash.com/random/1000x600') no-repeat center/100% 100%; */
font-family: 'Roboto', sans-serif;
/* 居中 */
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
img {
width: 500px;
height: 500px;
/* 元素的内容会被等比例缩放,以便完全覆盖容器的尺寸。这意味着图像或视频的某些部分可能会被裁剪,以使内容填充整个容器,并保持其纵横比。 */
object-fit: cover;
}
/* 轮播图 */
.carousel {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
height: 500px;
width: 500px;
/* 超出部分隐藏 */
overflow: hidden;
position: relative;
}
/* 图片容器 */
.image-container {
display: flex;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
/* 按钮 */
.btn {
background-color: rgba(0, 0, 0, 0.3);
color: black;
border: none;
cursor: pointer;
width: 2rem;
outline: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0.5rem 0;
}
#left{
padding-right: 0.5rem;
border-radius: 0 50% 50% 0;
left: 0;
}
#right {
padding-left: 0.5rem;
border-radius: 50% 0 0 50%;
right: 0;
}
.btn:hover {
opacity: 0.9;
}
script.js
// 重点 transform transition
// 1.获取元素节点
const imgs = document.getElementById('imgs')//图片容器
const leftBtn = document.getElementById('left')//上一张按钮
const rightBtn = document.getElementById('right')//下一张按钮
const img = document.querySelectorAll('#imgs img')//所有图片
// 当前图片索引
let idx = 0
// 间隔器
let interval = setInterval(run, 2000)
// 滑动
function run() {
idx++
// 改变图片
changeImage()
}
// 改变图片
function changeImage() {
if (idx > img.length - 1) {
idx = 0
} else if (idx < 0) {
idx = img.length - 1
}
imgs.style.transform = `translateX(${-idx * imgs.offsetWidth}px)`
imgs.style.transition = `transform 0.5s ease-in-out`
}
// 重置
function resetInterval() {
clearInterval(interval)
interval = setInterval(run, 2000)
}
// 下一张
rightBtn.addEventListener('click', () => {
idx++
changeImage()
resetInterval()
})
// 上一张
leftBtn.addEventListener('click', () => {
idx--
changeImage()
resetInterval()
})
文章来源:https://www.toymoban.com/news/detail-600951.html
到了这里,关于day35-Image Carousel(图片轮播图简易版)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!