jQuery 带有淡入淡出的滑块不改变图像
jQuery slider with fade not changing image
我正在尝试创建一个简单的 JQuery 滑块。并且每次只能看到一张照片。在 x 秒后,一个新图像应该淡入。
唯一的问题是图像不显示并且停留在第一张图片上。
也许有人可以帮我解决这个问题。
到目前为止的代码:
HTML
<div id="slideshow">
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 1" class="active" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 2" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 3" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 4" />
</div>
</span>
</div>
JS:
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow 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()", 2500 );
});
我的工作 jsfiddle:http://goo.gl/4AvUcr
您的滑块不起作用,因为您以错误的方式使用了 next:next 是同级选择器,因此 img 的下一个同级将是它本身,因为 div 中没有其他元素带图。
如果您更改代码以删除包裹 div 的 span 标签(不知道为什么会有这些并且它是无效代码),您可以使用以下内容:
function slideSwitch() {
var $active = $('#slideshow .active');
if ($active.length == 0) $active = $('#slideshow > div:last');
var $next = $active.next().length ? $active.next() : $('#slideshow > div:first');
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.animate({
opacity: 1.0
}, 1000, function() {
$next.addClass('active')
});
$active.css({
opacity: 1.0
})
.animate({
opacity: 0.0
}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 2500);
});
#slideshow {
position: relative;
height: 350px;
}
#slideshow .vHolder {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow img {
max-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div class="vHolder" class="active">
<a href="#"><img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" /></a>
</div>
</div>
我正在尝试创建一个简单的 JQuery 滑块。并且每次只能看到一张照片。在 x 秒后,一个新图像应该淡入。 唯一的问题是图像不显示并且停留在第一张图片上。 也许有人可以帮我解决这个问题。
到目前为止的代码: HTML
<div id="slideshow">
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 1" class="active" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 2" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 3" />
</div>
</span>
<span>
<div class="vHolder">
<img src="http://lorempixel.com/150/150/" alt="Slideshow Image 4" />
</div>
</span>
</div>
JS:
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow 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()", 2500 );
});
我的工作 jsfiddle:http://goo.gl/4AvUcr
您的滑块不起作用,因为您以错误的方式使用了 next:next 是同级选择器,因此 img 的下一个同级将是它本身,因为 div 中没有其他元素带图。
如果您更改代码以删除包裹 div 的 span 标签(不知道为什么会有这些并且它是无效代码),您可以使用以下内容:
function slideSwitch() {
var $active = $('#slideshow .active');
if ($active.length == 0) $active = $('#slideshow > div:last');
var $next = $active.next().length ? $active.next() : $('#slideshow > div:first');
$active.addClass('last-active');
$next.css({
opacity: 0.0
})
.animate({
opacity: 1.0
}, 1000, function() {
$next.addClass('active')
});
$active.css({
opacity: 1.0
})
.animate({
opacity: 0.0
}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 2500);
});
#slideshow {
position: relative;
height: 350px;
}
#slideshow .vHolder {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
}
#slideshow img {
max-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div class="vHolder" class="active">
<a href="#"><img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" /></a>
</div>
<div class="vHolder">
<a href="#"><img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" /></a>
</div>
</div>