返回新聞列表
用chatgpt寫的一個jquery效果，多行多列 logo圖片透明度 無限閃動效果！
發(fā)布日期: 2023-04-17 | 來源: 智軟設(shè)計工作室
今天試著用chatgpt寫的一個jquery效果，多行多列 logo圖片 透明度 無限閃動效果！
一步一步寫需求，讓他實現(xiàn)了，這個還是很不錯?？梢怨?jié)省很多時間，很厲害，估計會替代很多，初級程序員的工作了。。
效果如下，代碼還是很精簡的，
<style>
.column {
display: inline-block;
margin: 0 10px;
vertical-align: top;
width: 15%;
overflow: hidden;
}
.image-container {
position: relative;
height: 100px;
width: 100%;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
img{
background: #fff;
}
</style>
<div id="container">
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26750e79214d4_638c7bab77d1c77eaaa777e0_CM-Client-Logos_Yahoo.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26752269214c4_638c7baa4c238b45b5b43616_CM-Client-Logos_Triumph.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26736779214c7_638c7baa57859f7194da5a7b_CM-Client-Logos_UAL.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26750e79214d4_638c7bab77d1c77eaaa777e0_CM-Client-Logos_Yahoo.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed2679b289214ca_638c7bab2a2fb8f435086abb_CM-Client-Logos_Viacom.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26750e79214d4_638c7bab77d1c77eaaa777e0_CM-Client-Logos_Yahoo.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26736779214c7_638c7baa57859f7194da5a7b_CM-Client-Logos_UAL.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed2676d479214c8_638c7baa44a03f1bf8abb019_CM-Client-Logos_UCL-School-of-Management.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26750e79214d4_638c7bab77d1c77eaaa777e0_CM-Client-Logos_Yahoo.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26731d39214c9_638c7baa9d4abb4c2c08ca06_CM-Client-Logos_Universal.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed2679b289214ca_638c7bab2a2fb8f435086abb_CM-Client-Logos_Viacom.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26725fd9214cb_638c7bab40a9841b26e545c6_CM-Client-Logos_USC.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26725fd9214cb_638c7bab40a9841b26e545c6_CM-Client-Logos_USC.svg">
</div>
</div>
<div class="column">
<div class="image-container">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26750e79214d4_638c7bab77d1c77eaaa777e0_CM-Client-Logos_Yahoo.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26753e39214d1_638c7bab6a8a272fb8a03181_CM-Client-Logos_Warner-Brothers.svg">
<img src="/6399f24a1ed26709cc9209f9/6399f24a1ed26752269214c4_638c7baa4c238b45b5b43616_CM-Client-Logos_Triumph.svg">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/*$(function() {
var columns = $('#container .column');
setInterval(function() {
var columnIndex = Math.floor(Math.random() * columns.length);
var imageContainer = $(columns[columnIndex]).find('.image-container');
var images = $(imageContainer).find('img');
$(images).hide();
var imageIndex = Math.floor(Math.random() * images.length);
$(images[imageIndex]).show();
}, 300);
});*/
$(function() {
var columns = $('#container .column');
setInterval(function() {
var columnIndex = Math.floor(Math.random() * columns.length);
var imageContainer = $(columns[columnIndex]).find('.image-container');
var images = $(imageContainer).find('img');
$(images).hide();
// Add a fade in effect to the selected image
var imageIndex = Math.floor(Math.random() * images.length);
$(images[imageIndex]).fadeIn(1000);
}, 300);
});
</script>