jQuery自動滾動瀏覽圖片

Question

我正在爲我爲朋友設計的網站創建一個簡單的小幻燈片。到目前爲止，通過點擊圖像來顯示/隱藏相應的圖像，我可以完美地工作。我試圖讓它自動滾動瀏覽圖片，但它似乎不工作。這裏是我的代碼：

<script type="text/javascript"> 
$(function() // run after page loads 
{ 
    $('.slide1t').show(); 

    $('.slide2').click(function() 
    { 
    $('.slide2t').show(); 
    $('.slide1t').hide(); 
    $('.slide3t').hide(); 
    $('.slide4t').hide(); 
    }); 
    $('.slide1').click(function() 
    { 
    $('.slide1t').show(); 
    $('.slide2t').hide(); 
    $('.slide3t').hide(); 
    $('.slide4t').hide(); 
    }); 
    $('.slide3').click(function() 
    { 
    $('.slide3t').show(); 
    $('.slide1t').hide(); 
    $('.slide2t').hide(); 
    $('.slide4t').hide(); 
    }); 
    $('.slide4').click(function() 
    { 
    $('.slide4t').show(); 
    $('.slide1t').hide(); 
    $('.slide2t').hide(); 
    $('.slide3t').hide(); 
    }); 
}); 

</script> 

這是我用來隱藏/顯示圖片點擊時的代碼。這可以縮短使用切換？

這就是我試圖讓他們自動滾動：

<script type="text/javascript"> 
$(function() // run after page loads 
{ 
    $('.slide1t').show([1000]), 
    $('.slide1t').hide(), 
    $('.slide2t').show([1000]), 
    $('.slide21t').hide(), 
    $('.slide3t').show([1000]), 
    $('.slide3t').hide(), 
    $('.slide4t').show([1000]), 
    $('.slide4t').hide() 
}); 

</script> 

我試過的相同的代碼等方面進行嘗試，並得到它做一些事情，但沒有砧。

<div id="slideshow"> 

     <div class="text"> 
      <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a> 
      <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
      <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
      <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a> 
     </div> 

     <div class="image">   
      <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a> 
      <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a> 
      <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a> 
      <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a> 
     </div> 

    </div> 

我已經研究過的文檔，看見你可以使用.show([duration],[easing],[callback])，但我真的不知道該怎麼輸入到他們。

謝謝全部

Answer 1

你製作幻燈片，你可以看到一個和下一個幻燈片的左邊和右邊目前的幻燈片，還是隻有一張幻燈片褪色到另一張？

如果是後者，你可以使用這個非常簡單的代碼來做到這一點。

HTML：

<div class="image">   
    <img src="images/image1.png" /> 
    <img src="images/image2.png" /> 
    <img src="images/image3.png" /> 
    <img src="images/image4.png" /> 
</div> 

CSS：

.image 
{ 
    position:relative; 
} 

.image img 
{ 
    position:absolute; 
    top:0; 
    left:0; 
} 

的jQuery：

$(function() { 

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads 

    setInterval(function() 
    { 
     $('.image :first-child').fadeOut(1000) 
      .next().fadeIn(1000).end().appendTo('.image'); 
    },5000);   
} 

這基本上就像洗牌的撲克牌圖像。 5000（5秒）是衰落之間的間隔，1000（1秒）是衰落動畫的速度。

要使用此功能，您必須使用position:relative上的div和position:absolute將圖像放在另一個上面。

jsFiddle demo

Answer 2

事情是，.show是異步的。所以你的JavaScript將繼續它會做的效果。這就是第三個參數的作用，它是一個匿名函數，當效果結束時會被調用。

你應該看看一個jquery插件，這使得你自己在浪費時間。有數百個這些插件，因此總有一個符合您的需求。

例如：http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Answer 3

你可以這樣做：

$('.image a').each(function (index) { 
    $(this).show(1000, function() { 
     $(this).delay(index * 1000).hide(1000); 
    }); 
}); 

FIDDLE DEMO

Answer 4

如果你不想太多改變你的結構，還是要保留的點擊功能，你可以做一些事情like this

這類似於你原來的做法，但基於在功能和元素的siblings而不是做每個圖像個人。這對於輕鬆添加新元素並保留功能進行了優化。我用了一個setInterval循環動畫功能以及

HTML（輕微改變）

<div id="slideshow"> 
     <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a> 
    <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a> <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a> <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a> 

</div> 
     <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a> 
    <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a> 
    <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a> 
    <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a> 

     </div> 
    </div> 

CSS：

.image a:not(#one) { 
    display:none; 
} 

的javascript：

$('.text a').click(function() { 
    var idName = $(this).attr('id'); 
    $('.image a').each(function() { 
     if ($(this).attr('id') === idName) $(this).show(1000); 
     else { 
      $(this).hide(1000); 
     } 
    }); 
    window.clearInterval(loop); 
    loop = self.setInterval(function() { 
     autoChangeSlide() 
    }, 5000); 
}); 

function autoChangeSlide() { 
    var elem; 
    $('.image a').each(function() { 
     if ($(this).is(':visible')) elem = $(this); 
    }); 
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) { 
     elem.hide(1000).next().show(1000); 
    } else { 
     elem.hide(1000).parent().children('a').first().show(1000); 
    } 
} 
var loop = self.setInterval(function() { 
    autoChangeSlide() 
}, 5000); 

您可以結合自己的解決方案與Dolchio的使其特別真棒