0

图库加载第一个图像，然后切换到下一个，切换回第一个，然后切换到第三个，依此类推。不知道为什么，这正在发生。

jQuery：

var hoverhome = 'url("images/HomePreview.png")';
  var hoverhome = 'url("images/HomePreview.png")';
  var hoverhome = 'url("images/HomePreview.png")';
  var hovergallery = 'url("images/GalleryPreview.png")';
  var hoverhome = 'url("images/HomePreview.png")';
  var empty = 'none';
  var success = 'SUCCESS!';
  //home
  jQuery('nav .home a').hover(function()
  {
    jQuery('.viewport').css('background-image', hoverhome);

  });
  jQuery('nav .home a').mouseout(function()
  {    
        jQuery('.viewport').css('background-image', empty);
  }); 
  //about
  jQuery('nav .home a').hover(function()
  {
    jQuery('.viewport').css('background-image', hoverhome);

  });
  jQuery('nav .home a').mouseout(function()
  {    
        jQuery('.viewport').css('background-image', empty);
  }); 
  //services
  jQuery('nav .home a').hover(function()
  {
    jQuery('.viewport').css('background-image', hoverhome);

  });
  jQuery('nav .home a').mouseout(function()
  {    
        jQuery('.viewport').css('background-image', empty);
  }); 
  //gallery
  jQuery('nav .gallery a').hover(function()
  {
    jQuery('.viewport').css('background-image', hovergallery);

  });
  jQuery('nav .home a').mouseout(function()
  {    
        jQuery('.viewport').css('background-image', empty);
  }); 
  //contact us
  jQuery('nav .home a').hover(function()
  {
    jQuery('.viewport').css('background-image', hoverhome);

  });
  jQuery('nav .home a').mouseout(function()
  {    
        jQuery('.viewport').css('background-image', empty);
  }); 


$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);

在 php 文件中调用：

<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery('#slideshow > div:gt(0)').hide();

setInterval(function() { 
jQuery('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);
 //--><!]]></script>


<div id="slideshow">
<div id="slideshow1">

然后我将 css 中的图像称为各种 div 的背景，它们加载良好。事实上，整个幻灯片工作正常，除了在第一次旋转期间多次显示第一张幻灯片的故障，第一次旋转后它工作正常。该站点位于 www.bingetech.com 以供进一步参考。

4

1 回答 1

0

在幻灯片的 HTML 中，

仅将第一张幻灯片保留为 display:block 其余的为 display:none

<div style="display: block; opacity: 0;" id="slideshow5">
</div><div style="display: none;" id="slideshow1">
</div><div style="display: none;" id="slideshow2">
</div><div style="display: none;" id="slideshow3">
</div><div style="display: none" id="slideshow4">
</div>
于 2013-06-01T21:02:49.773 回答