ChatGPT手把手教你实现轮播图

文章目录实现轮播图的小DemoChatGPT使用CSS实现轮播图ChatGPT使用JavaScript实现轮播图结语 实现轮播图的小Demo Demo的目录结构： ChatGPT使用CSS实现轮播图 效果展示： ChatGPT写的代码<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8">& 0 Comments

文章目录

  • 实现轮播图的小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 评论

留下您的评论.