Anchor-x/WebDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Image carousel effect

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

75
src/html/ynu.html
View File

@@ -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>