2

jQueryこのブログから、以下のスライドショーの簡単なコードを見つけました。

http://leavesofcode.net/2012/08/17/simple-slideshow/

私が現在取り組んでいるプロジェクトで完全に機能し、機能を使用して画像を呼び出すことができjQuery load()、スライドショーは引き続き機能します。可能であれば、前と次のボタンを同じコードに実装したいと思います。どんな助けでも本当に感謝しています。助けてくださいありがとう。

コードは次のとおりです。http://jsfiddle.net/mblase75/CRUJJ/

<script>
$(document).ready(function() {
    setInterval(function() {
        var $curr = $('.slideshow img:visible'), // should be the first image
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
            // if there isn't a next image, loop back to the first image
        $next.css('z-index',2).fadeIn('slow', function() { // move it to the top
            $curr.hide().css('z-index',0); // move this to the bottom
            $next.css('z-index',1);        // now move it to the middle
        });
    }, 6000); // milliseconds
});
</script>

<div class="slideshow">
    <img src="first-image.jpg" width="500" height="100" alt="first image">
    <img src="second-image.jpg" width="500" height="100" alt="second image">
    <img src="third-image.jpg" width="500" height="100" alt="third image">
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>

<style>
.slideshow {
    position: relative; /* necessary to absolutely position the images inside */
    width: 500px; /* same as the images inside */
    height: 100px;
}
.slideshow img {
    position: absolute;
    display: none;
}
.slideshow img:first-child {
    display: block; /* overrides the previous style */
}
</style>
4

6 に答える 6

6

getNext と getPrev の関数を作成し、それらをイベント ハンドラーとして、スライドショーを前後に移動する要素にアタッチする必要があります。

遷移コードを共有できるように、getNext 関数と getPrev 関数の両方で共有される共通の遷移関数を作成しました。

以下の例では、次または前のボタンをクリックするとスライドショーが一時停止しますが、自動トランジションを継続するように簡単に変更できます。

ワーキングデモ

var interval = undefined;
$(document).ready(function () {
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
});

function getNext() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);

    $next.css('z-index', 2).fadeIn('slow', function () {
        $curr.hide().css('z-index', 0);
        $next.css('z-index', 1);
    });
}
于 2013-07-22T12:10:15.153 に答える
1

これが古いことは知っていますが、以下を修正してください。

$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');

.slideshow {
    width: 100%;
    position: relative;
    height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    height: auto;
    position: absolute;
}

逆に考えようとしているだけです。上記はすべて素晴らしいですが、トランジションは、ええと、スムーズではありませんでした. これには理由があります。

于 2013-12-16T22:57:20.063 に答える
1

次のボタンのクリック イベントでコードを使用します。このようなもの：

    $("#button_id").click(function(){
all your lines in **setInterval**
});

前のボタンには、 .nextの代わりに.prevを使用します

于 2013-07-22T11:55:59.510 に答える
1

レスポンシブ スライドショー フリー jquery スクリプト

私は最近プロジェクトで上記のスクリプトを使用しました。その応答性が高く、軽量で、ボタンの有無にかかわらず完全にカスタマイズ可能です。私のおすすめ..

于 2013-07-22T11:57:41.907 に答える
1

次のように、HTML にいくつかの img を追加します。

<div class="slideshow">
    <img src="first-image.jpg" width="500" height="100" alt="first image">
    <img src="second-image.jpg" width="500" height="100" alt="second image">
    <img src="third-image.jpg" width="500" height="100" alt="third image">
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">

次のようにJavaScriptを変更します。

    $(document).ready(function() {

        $("#imgNext").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
                $next.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $next.css('z-index',1);
            });
    });

        $("#imgPrev").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
                $prev.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $prev.css('z-index',1);
            });
        });

        set

Interval(function() {
        var $curr = $('.slideshow img:visible'), 
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
        $next.css('z-index',2).fadeIn('slow', function() {
            $curr.hide().css('z-index',0);
            $next.css('z-index',1);
        });
    }, 6000); // milliseconds
});

フィドラーであなたのコードで試してみましたが、うまくいきます:)

于 2013-07-22T12:10:18.920 に答える
0

試す

 $('.next').click(function(){ 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
   })
于 2013-07-22T11:54:38.940 に答える