イメージを20秒ごとに変更してください。Javascript with Rows

Question

ここからこのコードを見つけましたが、このjavascriptにこれらのものを追加する必要があります。

1. フェード効果

2. 2行で画像を表示するようにしたい、私は10枚の画像を追加することを意味します。 1行目に5枚の画像が表示され、2行目に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>

あなたがアイデアを得ることが当然のスピードアップ。