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