2

snook.ca ( http://snook.ca/archives/javascript/simplest-jquery-slideshow ) の「Simplest jQuery Slideshow」を使用していますが、気に入っています。ここでコードを引用します：

JavaScript

$(function(){
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  $('.fadein :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('.fadein');}, 
  3000);
});

CSS

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

HTML

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

クリックすると、手動で次の画像と最後の画像に移動する矢印を追加したいと思います。まだどこにも解決策が見つからず、Jquery についてもわからないので、ここでこの質問をしています...

皆様本当にありがとうございました！

4

1 に答える 1

1 
$(function(){
    $('.fadein img:gt(0)').hide();
    $('.nextButton').on('click', function(){
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    });
    $('.previousButton').on('click', function () {
        $('.fadein :last-child').fadeIn()
            .insertBefore($('.fadein :first-child').fadeOut());
    });
});

appendTo他のスクリプトが現在のインデックス 0を利用しているため、後方への移動は異なりimgます。ボタンを提供する必要がありますが、それは非常に簡単です。この jsFiddleで試すことができます。

于 2013-10-05T00:02:53.340 に答える