-4

我需要更改此脚本,以便我可以单击我的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;
}
4

1 回答 1

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-expandslideshow-box应该是动画的..

于 2012-05-09T14:49:53.097 回答