Image carousel effect
This commit is contained in:
parent
9c07cb69f0
commit
26691ce656
@ -25,12 +25,26 @@
|
||||
<div class="hover:text-red-300">English</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="w-full h-fit mt-1 relative">
|
||||
<div class="w-full h-screen relative flex z-0" id="slider-wrapper">
|
||||
<img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <div class="w-full h-fit mt-1 relative">-->
|
||||
<!-- <div class="w-full h-screen relative flex z-0" id="slider-wrapper">-->
|
||||
<!-- <img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--图片轮播实现-->
|
||||
<script src="../ts/slider.ts" defer></script>
|
||||
<!-- 轮播图容器 -->
|
||||
<div id="carousel">
|
||||
<img src="../../img/anyuse0.png" alt="anyuse6">
|
||||
<img src="../../img/anyuse7.png" alt="anyuse7">
|
||||
<img src="../../img/anyuse9.png" alt="anyuse9">
|
||||
<img src="../../img/anyuse8.png" alt="anyuse8">
|
||||
<!-- 按钮组 -->
|
||||
<div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
|
||||
<div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
|
||||
<div id="sliderBtn"></div> <!-- 切换按钮组 -->
|
||||
</div>
|
||||
|
||||
<div class="w-full flex">
|
||||
@ -86,7 +100,7 @@
|
||||
我渐渐的有些困，我问他这东西要搞多久
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -95,7 +109,7 @@
|
||||
他说要几个小时
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -104,7 +118,7 @@
|
||||
我给他倒了杯茶，就一个人去隔壁睡觉了
|
||||
</div>
|
||||
<div class="w-1/3 border-2">
|
||||
<img class="h-16 w-32" src="../../img/picture.jpeg" alt=""/>
|
||||
<img class="h-16 w-32" src="../../img/picture.png" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -138,9 +152,9 @@
|
||||
|
||||
<div class="w-fit flex flex-wrap m-4 border-2 justify-around rounded-lg shadow-lg bg-gradient-to-r from-cyan-300 to to-violet-300">
|
||||
<ul class="li-img clearfix">
|
||||
<li><img src="../../img/anyuse2.jpg" alt=""/></li>
|
||||
<li><img src="../../img/anyuse3.jpg" alt=""/></li>
|
||||
<li><img src="../../img/anyuse4.jpg" alt=""/></li>
|
||||
<li><img src="../../img/anyuse2.png" alt=""/></li>
|
||||
<li><img src="../../img/anyuse3.png" alt=""/></li>
|
||||
<li><img src="../../img/anyuse4.png" alt=""/></li>
|
||||
<li><img src="../../img/anyuse5.png" alt=""/></li>
|
||||
<li><img src="../../img/anyuse6.png" alt=""/></li>
|
||||
<li><img src="../../img/anyuse7.png" alt=""/></li>
|
||||
@ -156,42 +170,5 @@
|
||||
<p>Copyright@ 2002-2018 School of Software</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const sliderData = [
|
||||
{url: "../../img/anuse0.png"},
|
||||
{url: "../../img/anuse1.png"},
|
||||
{url: "../../img/anuse2.png"},
|
||||
{url: "../../img/anuse3.png"},
|
||||
];
|
||||
const img = document.getElementById("img");
|
||||
const dot = document.getElementById("dot");
|
||||
|
||||
let i = 0;
|
||||
|
||||
setInterval(function () {
|
||||
i++;
|
||||
if (i > 3) {
|
||||
i = 0;
|
||||
}
|
||||
img.src = sliderData[i].url;
|
||||
for (let j = 0; j <= 3; j++) {
|
||||
if (i === j) {
|
||||
dot.children[j].style.backgroundColor = "white";
|
||||
} else {
|
||||
dot.children[j].style.backgroundColor = "inherit";
|
||||
}
|
||||
|
||||
img.src = sliderData[i].url;
|
||||
for (let j = 0; j <= 3; j++) {
|
||||
if (i === j) {
|
||||
dot.children[j].style.backgroundColor = "white";
|
||||
} else {
|
||||
dot.children[j].style.backgroundColor = "inherit";
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -28,3 +28,68 @@
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#carousel {
|
||||
@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
|
||||
}
|
||||
|
||||
#carousel img {
|
||||
position: absolute; /* 绝对定位 使图片堆叠 */
|
||||
width: auto; /* 设定大小 按比例缩放 */
|
||||
height: auto; /* 设定大小 按比例缩放 */
|
||||
transition: all .6s; /* 动画 */
|
||||
opacity: 0; /* 隐藏 */
|
||||
}
|
||||
|
||||
.imgActive {
|
||||
opacity: 1 !important; /* 显示图片 最高优先级 */
|
||||
}
|
||||
|
||||
/* 控制按钮的样式 */
|
||||
#leftArrow,
|
||||
#rightArrow {
|
||||
//position: absolute;
|
||||
//left: 5px;
|
||||
//top: 50%;
|
||||
//width: 25px;
|
||||
//height: 30px;
|
||||
//background-color: #eee;
|
||||
//display: flex;
|
||||
//justify-content: center;
|
||||
//align-items: center;
|
||||
//opacity: 0.7;
|
||||
//font-size: 20px;
|
||||
//cursor: pointer;
|
||||
//z-index: 1000;
|
||||
@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
|
||||
}
|
||||
|
||||
#rightArrow {
|
||||
//left: auto;
|
||||
//right: 5px;
|
||||
@apply left-auto right-5;
|
||||
}
|
||||
|
||||
#sliderBtn {
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//bottom: 0;
|
||||
//display: flex;
|
||||
//justify-content: flex-end;
|
||||
//z-index: 1000;
|
||||
@apply absolute w-full bottom-0 flex justify-end z-10;
|
||||
}
|
||||
|
||||
.unitBtn {
|
||||
//width: 10px;
|
||||
//height: 10px;
|
||||
//background-color: #eee;
|
||||
//border-radius: 10px;
|
||||
//margin: 10px;
|
||||
//cursor: pointer;
|
||||
@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
|
||||
}
|
||||
|
||||
.btnActive {
|
||||
background-color: #4C98F7;
|
||||
}
|
||||
78
src/ts/slider.ts
Normal file
78
src/ts/slider.ts
Normal file
@ -0,0 +1,78 @@
|
||||
const imgArr = []; // 图片数组
|
||||
let curIndex = 0; // 当前显示图片
|
||||
let timer = null; // 定时器
|
||||
const btnList = []; // 右下角切换按钮组
|
||||
|
||||
function slide(targetIndex = curIndex + 1) {
|
||||
curIndex = targetIndex % imgArr.length; // 获取当前index
|
||||
imgArr.forEach((v) => v.className = ""); // 设置其他图片隐藏
|
||||
imgArr[curIndex].className = "imgActive"; // 设置当前index图片显示
|
||||
btnList.forEach(v => v.className = "unitBtn") // 设置其他按钮为灰色
|
||||
btnList[curIndex].className = "unitBtn btnActive"; // 设置当前按钮为蓝色
|
||||
}
|
||||
|
||||
function createBtnGroup(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
||||
document.getElementById("leftArrow").addEventListener('click', (e) => {
|
||||
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||
slide(curIndex - 1); // 允许点击则切换上一张
|
||||
timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 重设定时器
|
||||
})
|
||||
document.getElementById("rightArrow").addEventListener('click', (e) => {
|
||||
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||
slide(curIndex + 1); // 允许点击则切换下一张
|
||||
timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 重设定时器
|
||||
})
|
||||
const sliderBtn = document.getElementById("sliderBtn"); // 获取按钮容器的引用
|
||||
imgArr.forEach((v, i) => {
|
||||
let btn = document.createElement("div"); // 制作按钮
|
||||
btn.className = i === 0 ? "unitBtn btnActive" : "unitBtn"; // 初设蓝色与灰色按钮样式
|
||||
btn.addEventListener('click', (e) => {
|
||||
clearInterval(timer); // 清除定时器，避免手动切换时干扰
|
||||
slide(i); // // 允许点击则切换
|
||||
timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 重设定时器
|
||||
})
|
||||
btnList.push(btn); // 添加按钮到按钮组
|
||||
sliderBtn.appendChild(btn); // 追加按钮到按钮容器
|
||||
})
|
||||
}
|
||||
|
||||
function eventDispose(carousel: HTMLElement, config: { height?: string; interval: any; }) {
|
||||
document.addEventListener('visibilitychange', function () { // 浏览器切换页面会导致动画出现问题，监听页面切换
|
||||
if (document.visibilityState == 'hidden') clearInterval(timer); // 页面隐藏清除定时器
|
||||
else timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 重设定时器
|
||||
});
|
||||
carousel.addEventListener('mouseover', function () { // 鼠标移动到容器则不切换动画，停止计时器
|
||||
clearInterval(timer); // 页面隐藏清除定时器
|
||||
});
|
||||
carousel.addEventListener('mouseleave', function () { // 鼠标移出容器则开始动画
|
||||
timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 重设定时器
|
||||
});
|
||||
}
|
||||
|
||||
(function start() {
|
||||
const config = {
|
||||
height: "640px", // 配置高度
|
||||
interval: 5000 // 配置轮播时间间隔
|
||||
};
|
||||
const carousel = document.getElementById("carousel"); //获取容器对象的引用
|
||||
carousel.style.height = config.height; // 将轮播容器高度设定
|
||||
document.querySelectorAll("#carousel img").forEach((v, i) => {
|
||||
imgArr.push(v); // 获取所有图片组成数组
|
||||
v.className = i === 0 ? "imgActive" : "";
|
||||
});
|
||||
eventDispose(carousel, config); // 对一些浏览器事件处理
|
||||
createBtnGroup(carousel, config); // 按钮组的处理
|
||||
timer = setInterval(() => {
|
||||
slide()
|
||||
}, config.interval); // 设置定时器定时切换
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user