Javascript自动幻灯片辅助

Question

Well I recently integrated a slideshow which as I understood ((still a newbie with JS)) slide the pictures using opacity and focuses heavily on HTML DOM. The only issue I have with this that I want to be able to get redirected to a new page containing the image that I click on. Could someone explain to me how does this script works exactly and how could I add the possibility to redirect to the aforementioned page when I click with addEventListener and thanks in advance.

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

Firstly, the height spec for window.open() has to be min 100, and without px. Example:

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

Another way to open in a new window, is to wrap the 'img' tag in an 'a' tag, and make the target blank. Example:

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

But that may not be what you are looking for, as you seem to want the window to be 60px high and 6px wide.

Also, if you need to use window.open(), don't do:

<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');")/>

instead, do:

<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');")/>

Edit:

Here is a working example.

http://codepen.io/anon/pen/qrxeRB This will work.