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（）的高度规格必须为min 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>

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

此外，如果您需要使用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 这将有效。

Javascript自动幻灯片辅助

1 个答案: