1

私は通常、スライド ショーに cycle2 を使用しますが、最近別のプラグインを見ました: http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

以下のリンクのように、cycle2をこのように変更することにしました： http://jquery.malsup.com/cycle2/demo/nested.php

ネストされたスライドショーを作成できます:

<!DOCTYPE html>
<html>
<head>

<style>
body { margin: 40px }
#controls { width: 200px; height: 25px }
#slideshow,#controls { margin: auto }
#prev { float: left; }
#next { float: right; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script><script>

$(document).ready(function() {  
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');

var slideshow = $('#slideshow').cycle({
    fx: 'scrollHorz',
    speed: 300,
    timeout: 0,
    prev: '#prev',
    next: '#next',
    before: function() {
        // stop all inner slideshows
        inners.cycle('stop');

        // start the new slide's slideshow
        $(this).cycle({
            fx: 'fade',
            timeout: 2000,
            autostop: true,
            end: function() {
                // when inner slideshow ends, advance the outer slideshow
                slideshow.cycle('next');
            }
        });
    }
});

});
</script>
</head>

<body>
<div id="controls">
    <a id="prev" href="#">&lt; Prev</a>
    <a id="next" href="#">Next &gt;</a>
</div>
<div id="slideshow">
    <div class="inner-slideshow">
        <img src="01.png" width="200" height="200">
        <img src="02.png" width="200" height="200">
        <img src="03.png" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="04.png" width="200" height="200">
        <img src="05.png" width="200" height="200">
        <img src="06.png" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="07.png" width="200" height="200">
        <img src="08.png" width="200" height="200">
        <img src="09.png" width="200" height="200">
    </div>
</div>
</body>
</html>

また、各スライド効果を変更することもできます:
malsup.com/jquery/cycle/multi.html

したがって、内側のスライドショーでグループ化された透明な画像がいくつかあり、各画像がその効果によって前に来る場合、マルチレイヤーをシミュレートできます。

しかし、以前のネストされた画像を強制的に表示することはできません。
助けやアイデアはありますか？

4

0 に答える 0