文章目录
- 实现轮播图的小Demo
- ChatGPT使用CSS实现轮播图
- ChatGPT使用JavaScript实现轮播图
- 结语
实现轮播图的小Demo
Demo的目录结构：
ChatGPT使用CSS实现轮播图
- 效果展示：
- ChatGPT写的代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {/* width: w */width: 400px;/* height: h */height: 300px;overflow: hidden;}#photo {/* width: 3w */width: 1200px;animation: switch 5s ease-out infinite;}#photo>img {float: left;/* width: w */width: 400px;/* height: h */height: 300px;}@keyframes switch {0%,25% {margin-left: 0;}35%,60% {/* w */margin-left: -400px;}70%,100% {/* 2w */margin-left: -800px;}}</style> </head><body><div id="container"><div id="photo"><img src="./img/1.jpg" /><img src="./img/2.jpg" /><img src="./img/3.jpg" /></div></div> </body></html>
ChatGPT使用JavaScript实现轮播图
- 效果展示
- ChatGPT写的代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ChartGPT编写的轮播图</title><!-- 备注：这是ChartGPT实现的，我对其稍微改动了一下https://chat.openai.com/chat--><style>#slider {position: relative;width: 500px;height: 300px;overflow: hidden;}#slider img {position: absolute;width: 100%;height: 100%;}#slider img:not(:nth-child(1)) {opacity: 0;transition: opacity 1s;}#slider img.active {opacity: 1;}</style>
</head><body><div id="slider"><img src="./img/1.jpg" alt="Image 1"><img src="./img/2.jpg" alt="Image 2"><img src="./img/3.jpg" alt="Image 3"></div><script>var slider = document.getElementById("slider");var images = slider.getElementsByTagName("img");var current = 0;function nextImage() {images[current].classList.remove("active");current = (current + 1) % images.length;images[current].classList.add("active");}setInterval(nextImage, 3000);</script>
</body></html>
结语
本文链接：https://my.lmcjl.com/post/1766.html
展开阅读全文
4 评论