Question

我需要更改此脚本，以便我可以点击我的slideshow-expand向下箭头按钮，并在点击时上下切换框的高度。现在它适用于整个盒子点击，但我希望它在箭头上，因为它是一个幻灯片放映，每次你点击上一个或下一个箭头它切换框高度

这是脚本：

 $("#slideshow-box").click((function() {
                var i = 0;
                return function() {
                    $(this).animate({
                        height: (++i % 2) ? 166 : 115
                    }, 200);
                }
            })());
            });

这是html：

<div id="slideshow-box">
    <div id="slideshow-stage">
       <img src="images/slideshowimage.png">
       <img src="images/slideshowimage2.png">
       <img src="images/slideshowimage3.png">
    </div>

<div id="slideshow-prev"></div>
<div id="slideshow-next"></div>
<div id="slideshow-expand"></div>

这是css：

#slideshow-box {
    background-color:#CCC;
    position: absolute;
    top:129px;
    width:883px;
    height:115px;
    overflow:hidden;
    z-index:1;
}

#slideshow-stage {
    position: absolute;
    top:0;
    width:883px;
    height:115px;
    z-index:1;
    margin-left: auto;
    margin-right: auto;
}

#slideshow-stage>img {
    position:absolute;
    left:0;
    top:0;  
}

#slideshow-prev {
    position: absolute;
    top:40px;
    left:10px;
    background-image: url(images/arrows_left.png);
    background-repeat:no-repeat;
    width:22px;
    height:42px;
    opacity: .4;
    z-index:50;
}

#slideshow-prev:hover {
    opacity: 10;
    cursor:pointer;
}

#slideshow-next {
    position: absolute;
    top:40px;
    right:10px;
    background-image: url(images/arrows_right.png);
    background-repeat:no-repeat;
    width:22px;
    height:42px;
    opacity: .4;
    z-index:50;
}

#slideshow-next:hover {
    opacity: 10;
    cursor:pointer;
}

#slideshow-expand {
    background-image: url(images/arrows_down.png);
    background-repeat:no-repeat;
    width:28px;
    height:14px;
    position: absolute;
    bottom:10px;
    left:441px;
    opacity: .4;
    z-index:50;

}

#slideshow-expand:hover {
    position: absolute;
    bottom:10px;
    left:441px;
    opacity: 10;
    cursor:pointer;
}

Answer 1

您是否尝试过更改：

 $("#slideshow-box").click((function() ...

到

 $("#slideshow-expand").click((function() ...

修改

重新阅读后，您可能需要将其更改为：

$("#slideshow-expand").click((function() { var i = 0; return function() { $("#slideshow-box").animate({ height: (++i % 2) ? 166 : 115 }, 200); } })()); });

请注意，这里的不同之处在于我们没有使用this，因为当您点击slideshow-expand时，slideshow-box应该是动画的。

需要更改切换脚本

1 个答案: