이미지를 20 초마다 변경하십시오. 행을 포함한 자바 스크립트

Question

이 코드를 여기에서 발견했지만이 자바 스크립트에이 코드를 추가해야합니다. 페이드 효과가

2 행 이미지를 표시 할

1. , 나는 10 개 이미지를 추가 할 것을 의미합니다. 5 개의 이미지가 1 행에 표시되고 5 개의 이미지가 2 행에 표시됩니다.

2. 모든 사진에 텍스트를 추가하고 싶습니다. 이름과 이미지를 통해 가격

3. 마우스 변경 정지

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

은 물론 최대 것은 당신이 아이디어를 얻을 수주었습니다.