Bild alle 20 Sekunden ändern Javascript mit Zeilen

Question

Ich habe diesen Code von hier gefunden, aber ich muss diese Dinge in diesem Javascript hinzufügen.

1. Fade-Effekt

2. Bilder Möchten Sie mit 2 Reihen zeigen, bedeutet, dass ich 10 Bilder hinzufügen. 5 Bilder werden in der ersten Reihe und 5 Bilder in der 2. Reihe angezeigt.

3. Möchten Sie Text für jedes Bild hinzufügen, z. Name und Preis

4. Maus über das Bild in wechselnden

<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

Das Problem mit einer Frage wie diese, wir haben keine Ahnung, was Sie wirklich für Ziel. Was wir von Ihnen brauchen, ist ein bisschen Code, damit wir sehen können, wohin Sie gehen.

Ich bin sicher, dass eine beliebige Anzahl von uns ein kleines Karussell zusammenstellen könnte, das funktioniert, aber das ist nicht wirklich, was diese Seite ist. Es soll den Menschen helfen zu lernen und herauszufinden, was sie falsch gemacht haben oder was sie tun müssen, um ein Problem zu lösen.

Das sagte, es wäre falsch von mir, all dies zu schreiben, ohne etwas Code zu präsentieren.

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>

Sped Sie auf die Idee up natürlich sein.