标签：轮播 image current slider slide currentIndex 三郎 源代码 幻灯片
三郎前端特效学习源代码：图片主页轮播组件
简单介绍
各大网站都比较常用的主页轮播组件
可以自己改改就能用
效果图
源代码
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 引入font-awesome css，控制按钮用到了 -->
<link
rel="stylesheet"
href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"
/>
<!-- 引入页面CSS -->
<link rel="stylesheet" href="style.css" />
<title>图片轮播组件</title>
</head>
<body>
<header>
<!-- 轮播组件 -->
<div class="image-slider">
<!-- 第一张幻灯片 -->
<div class="slide current">
<!-- 图片 -->
<img
class="image"
src="https://images.pexels.com/photos/1434580/pexels-photo-1434580.jpeg?cs=srgb&dl=high-rise-buildings-1434580.jpg&fm=jpg"
alt="北京"
/>
<!-- 描述 -->
<div class="content">
<h1 class="title">北京</h1>
<p class="description">
北京市，简称“京”，是中华人民共和国首都、也是中国4个直辖市之一；北京是国家中心城市、超大城市，全国政治中心、文化中心、国际交往中心、科技创新中心，是世界著名古都和现代化国际城市，也是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会常务委员会的办公所在地。
</p>
</div>
</div>
<!-- 第一张幻灯片 -->
<div class="slide">
<!-- 图片 -->
<img
class="image"
src="https://images.pexels.com/photos/2614818/pexels-photo-2614818.jpeg?cs=srgb&dl=illuminated-tower-2614818.jpg&fm=jpg"
alt="东京"
/>
<!-- 描述 -->
<div class="content">
<h1 class="title">东京</h1>
<p class="description">
东京（とうきょう、Tōkyō），日本首都，位于日本关东平原中部，是面向东京湾的国际大都市，日本三大都市圈之一东京都市圈的中心城市。“东京”狭义上指东京都、旧东京府或东京都区部（旧东京市），亦可泛指东京都市圈
。东京是江户幕府的所在地，江户在庆应4年7月（1868年9月）改名为东京。
</p>
</div>
</div>
<!-- 第一张幻灯片 -->
<div class="slide">
<!-- 图片 -->
<img
class="image"
src="https://images.pexels.com/photos/597909/pexels-photo-597909.jpeg?cs=srgb&dl=buildings-city-city-view-cityscape-597909.jpg&fm=jpg"
alt="纽约"
/>
<!-- 描述 -->
<div class="content">
<h1 class="title">纽约</h1>
<p class="description">
纽约市（New York
City，简称NYC），位于美国纽约州东南部大西洋沿岸，是美国第一大城市及第一大港口，纽约都市圈为世界上最大的城市圈之一，与英国伦敦、中国香港并称为“纽伦港”（Nylonkong）。纽约与伦敦并列为全世界最顶级的国际大都市。2018年11月，纽约被GaWC评为Alpha++级世界一线城市。
</p>
</div>
</div>
<!-- 控制按钮 -->
<div id="prev"><i class="fas fa-chevron-left"></i></div>
<div id="next"><i class="fas fa-chevron-right"></i></div>
</div>
</header>
<!-- 引入JS -->
<script src="index.js" type="text/javascript"></script>
</body>
</html>
js部分
//后退按钮
const prev = document.querySelector("#prev");
//前进按钮
const next = document.querySelector("#next");
// 所有幻灯片
const slides = document.querySelectorAll(".slide");
// 当前正在播放的幻灯片
var currentIndex = 0;
// 是否自动播放
var autoPlay = true;
// 播放方向，前进或后退
var forward = false;
// 自动播放间隔，5秒
var interval = 5000;
// 添加前进按钮事件处理函数
next.addEventListener("click", handleNextClicked);
// 添加后退按钮事件处理函数
prev.addEventListener("click", handlePrevClicked);
// 是否自动播放
if (autoPlay) {
setInterval(forward ? handleNextClicked : handlePrevClicked, interval);
}
function handleNextClicked() {
//当前幻灯片
let current = slides[currentIndex];
// 去掉当前幻灯片的current属性
current.classList.remove("current");
//移动到下一张幻灯片，如果没有，则从第一张开始
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
// 给下一张幻灯片加上current class
slides[currentIndex].classList.add("current");
}
function handlePrevClicked() {
//当前幻灯片
let current = slides[currentIndex];
// 去掉当前幻灯片的current属性
current.classList.remove("current");
//移动到上一张幻灯片，如果没有，则从最后一张开始
currentIndex--;
if (currentIndex < 0) {
currentIndex = slides.length - 1;
}
// 给下一张幻灯片加上current class
slides[currentIndex].classList.add("current");
}
css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}
/* 设置轮播组件占满整个屏幕 */
.image-slider {
width: 100vw;
height: 100vh;
}
/* 设置每个幻灯片占满父容器 */
.image-slider .slide {
width: 100%;
height: 100%;
position: absolute;
transition: all linear 0.8s;
overflow: hidden;
}
/* 设置图片样式 */
.image-slider .image {
/* 设置图片大小 */
width: 100%;
height: 100%;
/* 图片自适应，保持比例占满屏幕 */
object-fit: cover;
/* 绝对布局，z-index 50放到文字下方 */
position: absolute;
z-index: 50;
}
/* 设置文本样式 */
.image-slider .slide .content {
position: absolute;
/* 放在图片上方 */
z-index: 100;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 48px;
bottom: 0;
width: 50%;
}
/* 标题距下方24px */
.image-slider .slide .content h1 {
margin-bottom: 24px;
}
/* 控制按钮 */
#prev,
#next {
position: absolute;
z-index: 150;
width: 80px;
height: 80px;
font-size: 48px;
color: white;
/* 居中 */
text-align: center;
line-height: 80px;
/* 圆角 */
border-radius: 50%;
/* 背景 */
background-color: rgba(0, 0, 0, 0.6);
/* 在组件中的位置 */
top: calc(50% - 24px);
left: 50px;
transition: all 0.2s;
cursor: pointer;
}
/* 下一张按钮的位置，靠右 */
#next {
left: unset;
right: 50px;
}
/* 鼠标移到按钮上时改变背景和字体颜色 */
#prev:hover,
#next:hover {
background-color: rgba(255, 255, 255, 0.6);
color: black;
}
/* 隐藏其他幻灯片 */
.image-slider .slide {
opacity: 0;
}
/* 设置当前正在播放的幻灯片的透明度为1 */
.image-slider .slide.current {
opacity: 1;
}
/* 图片文字描述动画属性,向下移动500px */
.image-slider .slide .content {
opacity: 0;
transform: translateY(500px);
}
/* 当前正在播放的幻灯片的文字描述位置移动到原位 */
.image-slider .slide.current .content {
opacity: 1;
transform: translateY(0);
transition: all 1s ease-in-out 0.4s;
}
/* 适配屏幕 */
@media screen and (max-width: 960px) {
/* 文字占满屏幕 */
.image-slider .slide .content {
width: 100%;
}
/* 控制按钮大小和间距缩小 */
#prev,
#next {
font-size: 24px;
left: 24px;
width: 48px;
height: 48px;
line-height: 48px;
top: 40%;
}
/* 移动下一张按钮，使间距变小 */
#next {
left: unset;
right: 24px;
}
}
标签：轮播,image,current,slider,slide,currentIndex,三郎,源代码,幻灯片 来源： https://blog.csdn.net/m0_51684972/article/details/110951287
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。