每20秒更換一次圖像Javascript with Row

Question

我從這裏找到了這段代碼，但我需要在這個javascript中添加這些東西。

1. 淡入淡出效果

2. ，要顯示2行的圖像，意味着我將新增10張圖像。 5張圖片將顯示在第一排，5張圖片將顯示在第二排。

3. 想要爲每張照片添加文本例如名稱和價格

4. 鼠標放在影像變更停止

<script> 
    var links = [ 
    "abc.org", 
    "def.org", 
    "ghi.org", 
    "ghi33.org" 
    ]; 
    var images = [ 
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg", 
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/mt6050.360x180.1430798334.jpg", 
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/pl5087.360x180.1423189940.jpg", 
    "https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg" 
    ]; 
    var i = 0; 
    var renew = setInterval(function(){ 
     if(links.length == i){ 
      i = 0; 
     } 
     else { 
     document.getElementById("bannerImage").src = images[i]; 
     document.getElementById("bannerLink").href = links[i]; 
     i++; 

    } 
    },10000); 
</script> 
<a id="bannerLink" href="abc.org" onclick="void window.open(this.href); return false;"> 
<img id="bannerImage" src="https://d37j5ujucg66b1.cloudfront.net/product/front/white/pl5393.360x180.1456885745.jpg"> 
</a> 

Answer 1

有這樣一個問題，問題是，我們不知道你真正瞄準。我們需要的是一些代碼，這樣我們就可以看到你的目標。

我確信任何數量的人都可以將一個有效的小傳送帶放在一起，但這不是真正的網站。這是爲了幫助人們學習和解決他們做錯了什麼，或者他們需要做什麼來解決問題。

這就是說我覺得寫這一切都沒有提出一些代碼是錯誤的。

var caraSel = document.querySelector(".simple-image"); 
 
var imageSel = document.querySelectorAll(".bannerLink"); 
 
var imageSelMax = imageSel.length - 1; 
 
var imageInt = 0; 
 
var imageIntNext = 1; 
 

 
var renew = setInterval(function() { 
 
    imageSel[imageInt].classList.add("hidden"); 
 
    imageSel[imageIntNext].classList.remove("hidden"); 
 

 
    imageSelMax === imageInt ? imageInt = 0 : ++imageInt; 
 
    imageSelMax === imageIntNext ? imageIntNext = 0 : ++imageIntNext; 
 
}, 1000); 
 

 
caraSel.addEventListener("mouseover", function() { 
 
    clearInterval(renew); 
 
}); 
 

 
caraSel.addEventListener("mouseout", function() { 
 
    renew = setInterval(function() { 
 
    imageSel[imageInt].classList.add("hidden"); 
 
    imageSel[imageIntNext].classList.remove("hidden"); 
 

 
    imageSelMax === imageInt ? imageInt = 0 : ++imageInt; 
 
    imageSelMax === imageIntNext ? imageIntNext = 0 : ++imageIntNext; 
 
    }, 1000); 
 
});

.simple-image { 
 
    position: relative; 
 
    width: 360px; 
 
    height: 180px; 
 
} 
 
.bannerLink { 
 
    position: fixed; 
 
    background: #FFF; 
 
    top: 0; 
 
    left: 0; 
 
    will-change: opacity; 
 
    transition: opacity .6s ease-in; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.bannerLink.hidden { 
 
    opacity: 0; 
 
}

<div class="simple-image"> 
 
    <a class="bannerLink" href="abc.org" onclick="void window.open(this.href); return false;"> 
 
    <img class="bannerImage" src="https://d37j5ujucg66b1.cloudfront.net/product/front/white/pl5393.360x180.1456885745.jpg">#1 
 
    </a> 
 

 
    <a class="bannerLink hidden" href="def.org" onclick="void window.open(this.href); return false;"> 
 
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/mt6050.360x180.1430798334.jpg">#2 
 
    </a> 
 

 
    <a class="bannerLink hidden" href="ghi.org" onclick="void window.open(this.href); return false;"> 
 
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/pl5087.360x180.1423189940.jpg">#3 
 
    </a> 
 

 
    <a class="bannerLink hidden" href="ghi33.org" onclick="void window.open(this.href); return false;"> 
 
    <img class="bannerImage" src="https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg">#4 
 
    </a> 
 
</div>

加快，當然是你的想法。