ChatGPT实现轮播图
实现轮播图的小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这个工具本身是不能够直接取代人的,但是能够善用这个工具的人,是能够取代更多的人
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfakkj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01