用chatgpt写的一个jquery效果，多行多列 logo图片透明度 无限闪动效果！

今天试着用chatgpt写的一个jquery效果，多行多列 logo图片 透明度 无限闪动效果！

一步一步写需求，让他实现了，这个还是很不错。可以节省很多时间，很厉害，估计会替代很多，初级程序员的工作了。。

效果如下，代码还是很精简的，

<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>