我正在尝试制作一个 jQuery 滑块,但使用 div 的:
<div id="block-1">
<div id="bannerleft">
<div class="wsite-header-1"></div>
</div>
<div id="bannerright">
<h2><span class='wsite-text'>CALL US NOW!</span></h2>
<p><span class='wsite-text'>Call now and get professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
<div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 1</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
</div>
</div>
<div id="block-2" style="display:none;">
<div id="bannerleft">
<div class="wsite-header2"></div>
</div>
<div id="bannerright">
<h2><span class='wsite-text'>CALL US NOW! 2</span></h2>
<p><span class='wsite-text'>Call now and get professional service delivered to you by our team of professional plumbers and technicians.<br/><br/>24/7 Emergency Service available</span></p>
<div style="text-align:left;"><div style="height: 0px; overflow: hidden;"></div>
<a class="wsite-button wsite-button-large wsite-button-highlight" href="contact-us" >
<span class="wsite-button-inner">CALL NOW 2</span>
</a>
<div style="height: 0px; overflow: hidden;"></div></div>
</div>
</div>
这是jQuery部分
$(document).ready(function() {
function animate(){
$('#block-1').toggle().delay(3000);
$('#block-2').toggle().delay(3000);
$('#block-3').toggle().delay(3000);
} animate();
setInterval(animate, 10000);
});
可悲的是它不起作用。它会立即转到第 2 块,当它显示第 1 块时,它也会在其下方显示第 3 块。有什么办法可以修复此代码?