Question

在我的嵌套幻灯片中，我有'上一页'和'下一页'控件。如果你在第一张幻灯片上，我希望能够减少'prev'的css不透明度，如果你在最后一张幻灯片上，我希望能减少'next'。

'after：onAfter'选项已经足够了，但在放入我的嵌套幻灯片控件的代码中时它似乎不起作用。

有没有办法在嵌套幻灯片中正确实现'after'，或者在嵌套幻灯片中测试第一张和最后一张图片？三江源

这是我的代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {                     
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#nav li:eq(' + (idx) + ') a';
    },
    before: function() {
        // stop all inner slideshows
        inners.cycle('stop');
        // start the new slide's slideshow
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  'fast',
            timeout: 0,
            prev: '#prev',
            next: '#next',
            nowrap:  1
        });
    }
});
});
</script>
<title>dev</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Top Slidehsow 1</a></li>
<li><a href="#">Top Slidehsow 2</a></li>
</ul>
<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="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200">
    </div>
</div>
</body>
</html>

Answer 1

我认为这就是你想要的（编辑你的例子）： http://jsfiddle.net/m8AFG/18/

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop');
    var slideshow = $('#slideshow').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        },
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');
            // start the new slide's slideshow
            $(this).cycle({
                fx: 'scrollHorz',
                speed: 'fast',
                timeout: 0,
                prev: '#prev',
                next: '#next',
                nowrap: 1,
                after: function() {
                    $('#prev').removeClass('opac');
                    $('#next').removeClass('opac');
                    var countImg = $(this).siblings().size();
                    if ($(this).index() == 0) $('#prev').addClass('opac');
                    if ($(this).index() == countImg) $('#next').addClass('opac');
                }
            });
        }
    });
});

添加了css opacity以及jquery和cycle脚本链接，它运行正常

问候，迈克尔

Answer 2

知道你正在使用什么插件会很有帮助，但大多数滑块插件都有一个可以添加函数的参数，每次实际滑动时都会调用它，比如'onChange'。如果这个插件具有这样的功能，你可以使用一些简单的Javascript直接操作CSS或元素，或者为它们添加一个类，以允许你在CSS中操作它们。

所以你需要知道当前的索引 - 看起来像'idx'可能提供的那样，然后你会做类似的事情（伪代码）

if(currentSlideNumber == slides.length){ 
    //Reduce opacity of next tab
}else if(currentSlideNumber == 1){
    //Reduce opacity of previous tab
}

其中'currentSlideNumber'是当前索引，而slides.length计算幻灯片的数量 - 在Javascript中将是：

$('.inner-slideshow').children('img').length

jquery循环插件，嵌套幻灯片，'后'选项或测试第一个和最后一个图像

2 个答案: