实现轮播图的小Demo
Demo的目录结构:
备注:我这使用的是ChatGPT3.5,不是最新的ChatGPT4
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>
结语
总的来讲,ChatGPT是能够实现轮播图效果的,但是如果想要更加丝滑或者说更符合你的需求,需要手动修改一下。不得不说ChatGPT真的是越用越爽,强烈建议大家去尝试接触一下这个新东西。至于如何使用,这就需要进行”科学上网“了,至于如何”科学上网“,这里就不再详细介绍了,相信大家只要有好奇心,到网上搜一下就能知道 O(∩_∩)O
最后送大家一句话:ChatGPT这个工具本身是不能够直接取代人的,但是能够善用这个工具的人,是能够取代更多的人