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