我在使用这个 jQuery 幻灯片插件的逻辑上遇到了问题。我不想设置图像的高度,因为其中一些图像被拉得太长了。但是如果没有设置图片高度,图片很矮,你可以看到后面的其他图片。代码如下所示:
html
<div id="slideshow1">
<img src="img/gallery1.jpg" class="active"/>
<img src="img/gallery2.jpg"/>
<img src="img/gallery3.jpg"/>
<img src="img/gallery4.jpg"/>
<img src="img/gallery6.jpg"/>
<img src="img/gallery7.jpg"/>
</div>
CSS
#slideshow1{
position:relative;
height:450px;
width:300px;
float:left;
}
#slideshow1 img{
position:absolute;
top:0;
left:0;
width:300px;
//height:450px;
z-index:8;
opacity: 0.0;
}
#slideshow1 img.active{
z-index:10;
opacity: 1.0;
}
#slideshow1 img.last-active{
z-index:9;
opacity: 0.0;
}
js
function slideSwitch() {
var $active = $('#slideshow1 IMG.active');
if ( $active.length == 0 ){
$active = $('#slideshow1 IMG:last');
}
var $next;
if ($active.next().length){
$next = $active.next();
}else{
$next = $('#slideshow1 IMG:first');
}
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
我尝试在 css 中将不透明度添加到 last-active,但这并没有奏效。是否可以切换背景图像的透明度而不会使代码困惑太多?
最佳答案
function slideSwitch() {
var $active = $('#slideshow1 IMG.active');
if ($active.length == 0) {
$active = $('#slideshow1 IMG:last');
}
var $next;
if ($active.next().length) {
$next = $active.next();
} else {
$next = $('#slideshow1 IMG:first');
}
$active.addClass('last-active');
$('#slideshow1 img').css('opacity','0.0'); //added this code
$next.css({
opacity: 0.0
})
.addClass('active')
.animate({
opacity: 1.0
}, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval(slideSwitch, 3000);
});
关于javascript - 使用插件将所有背景图像的不透明度设置为 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18550182/