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”标签包裹在“a”标签中，并使目标为空。示例:

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

但这可能不是您想要的，因为您似乎希望窗口高 60 像素，宽 6 像素。

此外，如果您需要使用 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 这会起作用。