我创建了一个图像幻灯片,其中包含我在网上找到的Jquery(包括我认为)的首页横幅文字块。除了从空白开始,然后循环遍历图像之外,它均起作用。这是指向预览页面https://www.3-gis.com/click-1-0-1?hs_preview=BQtmhLbk-11749548756
的链接我看过一些类似的线程,但是我对JS不够了解。
<div id="slideshow">
<div class="container" style="display: none;">
<img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/home%20banner%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Faster fiber deployments<br>Complete network visibility</h1>
</center></div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/mobile%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>When and where you need it</h1>
</center></div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/dashboard%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>at your fingertips</h1>
</center></div>
</div>
</div>
<script>
$("#slideshow > div:gt(0)") .hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#slideshow');
}, 4000);
</script>
我希望它从显示的第一张图片开始。
答案 0 :(得分:0)
问题在于您的幻灯片演示不会开始淡入图像,直到经过4秒的间隔。为了解决这个问题,您可以使用以下命令手动触发它:
$('#slideshow > div:first').fadeIn(500);
这是一个例子:
$('#slideshow > div:first').fadeIn(500);
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#slideshow');
}, 4000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div class="container" style="display: none;">
<img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/home%20banner%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Faster fiber deployments<br>Complete network visibility</h1>
</center>
</div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/mobile%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>When and where you need it</h1>
</center>
</div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/dashboard%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>at your fingertips</h1>
</center>
</div>
</div>
</div>