javascript
  • jquery
  • css
  • wordpress
  • slideshow
  • 2013-06-01 85 views 0 likes 
    0

    圖庫會加載第一張圖片,然後切換到下一張圖片,然後切換回第一張圖片,然後切換到thrird圖片等等。不知道爲什麼,這是發生。jQuery圖庫重複第一張圖片一圈

    的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,以供進一步參考。

    回答

    0

    在幻燈片的HTML,

    只保留第一幻燈片的顯示:塊和休息爲顯示:無

    <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> 
    
    相關問題