Javascript自動スライドショーアシスト

Question

まあ私は最近、（私はまだJSの初心者でもある）理解したようにスライドショーを統合し、不透明度を使ってスライドショーを行い、HTML DOMに重点を置いています。 私がクリックした画像を含む新しいページにリダイレクトできるようにしたいという唯一の問題です。 誰かが私にこのスクリプトがどのように正確に動作するのかを説明することができましたか、addEventListenerをクリックして前もって感謝して、上記のページにリダイレクトする可能性をどうやって追加できますか？

のJavascript：

 (function() { 

    function Slideshow(element) { 
     this.el = document.querySelector(element); 
     this.init(); 
    } 

    Slideshow.prototype = { 
     init: function() { 
      this.wrapper = this.el.querySelector(".slider-wrapper"); 
      this.slides = this.el.querySelectorAll(".slide"); 
      this.previous = this.el.querySelector(".slider-previous"); 
      this.next = this.el.querySelector(".slider-next"); 
      this.index = 0; 
      this.total = this.slides.length; 
      this.timer = null; 

      this.action(); 
      this.stopStart(); 
     }, 
     _slideTo: function(slide) { 
      var currentSlide = this.slides[slide]; 
      currentSlide.style.opacity = 1; 

      for(var i = 0; i < this.slides.length; i++) { 
       var slide = this.slides[i]; 
       if(slide !== currentSlide) { 
        slide.style.opacity = 0; 
       } 
      } 
     }, 
     action: function() { 
      var self = this; 
      self.timer = setInterval(function() { 
       self.index++; 
       if(self.index == self.slides.length) { 
        self.index = 0; 
       } 
       self._slideTo(self.index); 

      }, 3000); 
     }, 
     stopStart: function() { 
      var self = this; 
      self.el.addEventListener("mouseover", function() { 
       clearInterval(self.timer); 
       self.timer = null; 

      }, false); 
      self.el.addEventListener("mouseout", function() { 
       self.action(); 

      }, false); 
     } 


    }; 

    document.addEventListener("DOMContentLoaded", function() { 

     var slider = new Slideshow("#main-slider"); 

    }); 


})(); 

のCss：

.slider { 
    width: 1024px; 
    margin: 2em auto; 
} 

.slider-wrapper { 
    width: 100%; 
    height: 400px; 
    position: relative; 
} 

.slide { 
    float: left; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    transition: opacity 3s linear; 
    box-shadow: 0px 0px 0px 1.8px #000, 0px 0px 0px 10px #e7e5e4; 
} 

.slider-wrapper > .slide:first-child { 
    opacity: 1; 
} 

HTML：まず

<div class="slider" id="main-slider"> 
    <div class="slider-wrapper"> 
     <img src="i1.png" alt="First" class="slide" onclick="window.open('v1.html','new','height=60px;','width=6px','toolbar=no','menubar=no','scrollbars=0','location=no');")/><!-- les slides etc --> 
     <img src="i2.png" alt="Second" class="slide" onclick="window.open('v2.html','new','height=60px;','width=6px','toolbar=no','menubar=no','scrollbars=0','location=no');")/> 
     <img src="i3.png" alt="Third" class="slide" onclick="window.open('v3.html','new','height=60px;','width=6px','toolbar=no','menubar=no','scrollbars=0','location=no');")/> 
     <img src="i4.png" alt="Fourth" class="slide" id="t";/> 
    </div> 
</div> 

Answer 1

、window.openのために高仕様（）が100分間、そしてなしでなければなりませんpx。例：新しいウィンドウで開くように

var myWindow = window.open("", "", "width=200,height=100"); 

もう一つの方法は、「」タグに「IMG」タグをラップし、ターゲットを空白にすることです。例：あなたは、ウィンドウが高い60PXと計6Pxワイドになりたいように見えるよう

<a href="v1.html" target="_blank"> 
    <img src="i1.png" alt="First" class="slide"/> 
</a> 

しかし、それは、あなたが探しているものではないかもしれません。また

、あなたが（window.openを使用する必要がある場合）、実行しない：

<img src="i1.png" alt="First" class="slide" onclick="window.open('v1.html','new','height=60;','width=6','toolbar=no','menubar=no','scrollbars=0','location=no');")/> 

を代わりに、実行します。

<img src="i1.png" alt="First" class="slide" onclick="window.open('v1.html','new','height=60,width=6,toolbar=no,menubar=no,scrollbars=0,location=no');")/> 

編集：

をここにあります実例

http://codepen.io/anon/pen/qrxeRB これは動作します。