Image carousel effect

This commit is contained in:
myh 2023-12-06 00:04:34 +08:00
parent 9c07cb69f0
commit 26691ce656
3 changed files with 169 additions and 49 deletions

View File

@ -25,12 +25,26 @@
<div class="hover:text-red-300">English</div> <div class="hover:text-red-300">English</div>
</div> </div>
<div> <!-- <div>-->
<div class="w-full h-fit mt-1 relative"> <!-- <div class="w-full h-fit mt-1 relative">-->
<div class="w-full h-screen relative flex z-0" id="slider-wrapper"> <!-- <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=""> <!-- <img class="z-0 object-cover w-full" id="img1" src="../../img/anyuse0.png" alt="">-->
</div> <!-- </div>-->
</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>
<div class="w-full flex"> <div class="w-full flex">
@ -86,7 +100,7 @@
我渐渐的有些困,我问他这东西要搞多久 我渐渐的有些困,我问他这东西要搞多久
</div> </div>
<div class="w-1/3 border-2"> <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> </div>
@ -95,7 +109,7 @@
他说要几个小时 他说要几个小时
</div> </div>
<div class="w-1/3 border-2"> <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> </div>
@ -104,7 +118,7 @@
我给他倒了杯茶,就一个人去隔壁睡觉了 我给他倒了杯茶,就一个人去隔壁睡觉了
</div> </div>
<div class="w-1/3 border-2"> <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> </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"> <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"> <ul class="li-img clearfix">
<li><img src="../../img/anyuse2.jpg" alt=""/></li> <li><img src="../../img/anyuse2.png" alt=""/></li>
<li><img src="../../img/anyuse3.jpg" alt=""/></li> <li><img src="../../img/anyuse3.png" alt=""/></li>
<li><img src="../../img/anyuse4.jpg" alt=""/></li> <li><img src="../../img/anyuse4.png" alt=""/></li>
<li><img src="../../img/anyuse5.png" alt=""/></li> <li><img src="../../img/anyuse5.png" alt=""/></li>
<li><img src="../../img/anyuse6.png" alt=""/></li> <li><img src="../../img/anyuse6.png" alt=""/></li>
<li><img src="../../img/anyuse7.png" alt=""/></li> <li><img src="../../img/anyuse7.png" alt=""/></li>
@ -156,42 +170,5 @@
<p>Copyright@ 2002-2018 School of Software</p> <p>Copyright@ 2002-2018 School of Software</p>
</footer> </footer>
</div> </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> </body>
</html> </html>

View File

@ -28,3 +28,68 @@
visibility: hidden; visibility: hidden;
clear: both; 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
View 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); // 设置定时器定时切换
})();