javascript - jQuery 画廊正在重复第一张图片进行一次旋转

Question

画廊加载第一张图片，然后切换到下一张，再切换回第一张，然后再切换到第三张，依此类推。不知道为什么，这正在发生。

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 以供进一步引用。

Answer 1

在幻灯片的 HTML 中，

只保留第一张幻灯片显示为: block ，其余为显示:无

<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>