Question

这就是我所拥有的： 我在页面上有5张滑动照片，滑动照片下面有1-5页。我想一次只显示3个寻呼机，所以现在隐藏第4和第5个寻呼机。您可以单击“下一步”按钮为包含寻呼机的div设置动画以显示第4和第5，单击“上一步”按钮，然后返回显示第一至第三寻呼机。

这是我想要实现但不知道如何...... 当幻灯片放映到第4张照片时，如何使包含所有寻呼机的div向左移动以显示第4和第5个寻呼机？当幻灯片显示到达第4张照片时，如何让该div移动方式就像我点击“下一步”按钮一样？（当幻灯片返回到第一张照片时，寻呼机应再次移动，以便再次显示第1至第3个寻呼机。）

我不知道脚本的哪个部分可以让我知道哪个幻灯片当前处于活动状态。如果我知道，我想我可以在第4个活动时触发div的动画......

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cycle Test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
});

</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#next_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        var w = c.width();
        var status = w + pos.left;
        var dif = w - 190;
        var x = w + dif;
        if (status > 190) {
            c.stop().animate({
                left: pos.left - 180
            }, 500)
        };
    });
});

$(document).ready(function() {
    $('#prev_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        if (pos.left < 0) {
            c.stop().animate({
                left: pos.left + 180
            }, 500)
        };
    });
});
</script>
<style type="text/css">
<!--

* {
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
 #slideshow {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}
#bot {
    background-color: #CCC;
    height: 50px;
    width: 290px;
    margin-top: 10px;
    position: relative;
}
#nav_content #nav li {
    list-style-type: none;
    float: left;
    height:50px;
    width: 50px;
    margin-left: 10px;
}


#bot #nav_wrapper {
    background-color: #FFF;
    float: left;
    height: 50px;
    width: 190px;
    overflow: hidden;
    position: relative;
}
#bot #previous {
    float: left;
    height: 50px;
    width: 50px;
}
#bot #next {
    float: right;
    height: 50px;
    width: 50px;
}
#bot #nav_wrapper #nav_content {
    height: 50px;
    width: 310px;
    position: absolute;
    left: 0px;
    top: 0px;
}
-->
</style>
</head>

<body>
<div id="slideshow">
<img src="img/beach1.jpg" />
<img src="img/beach2.jpg" />
<img src="img/beach3.jpg" />
<img src="img/beach4.jpg" />
<img src="img/beach5.jpg" />
</div>

<div id="bot">
<div id="previous"><a id="prev_control" href="#">Prev</a></div>
<div id="nav_wrapper">
<div id="nav_content"> 
  <ul id="nav">
      <li><a href="#"><img src="img/beach1.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach2.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach3.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach4.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach5.jpg" width="50" height="50" /></a></li>
  </ul>
</div>
</div>
<div id="next"><a id="next_control" href="#">Next</a></div>
</div>
</body>
</html>

Answer 1

来自jQuery循环插件网站：

使用寻呼机选项时，生成的导航元素只是锚点。所以，如果你像这样设置寻呼机选项：传呼机：'#nav' 你可以像这样设置锚点的样式：

#nav a { background-color: #fc0 }

此外，活动幻灯片的导航元素被赋予类activeSlide，以便它可以被唯一地设置样式。

上例中的寻呼机样式如下：

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

jQuery Cycle-如何根据当前幻灯片索引为寻呼机设置动画

1 个答案: