jquery 循环插件 - 操作下一个/上一个按钮？答案

【问题标题】：jquery cycle plugin - manipulate next/prev buttons?jquery 循环插件 - 操作下一个/上一个按钮？
【发布时间】：2012-06-02 06:24:08
【问题描述】：

我从 jquery cycle plugin 创建了一个标准的 jquery 幻灯片，我没有更改。在我遵循this 教程之后，现在一切正常。我现在的问题是，有谁知道如何更改插件代码，上一个和下一个按钮不会同时显示在 mouseOver 上，而只是其中一个，取决于鼠标在幻灯片的哪一半？

如果有人可以帮助我，我会非常高兴:)

【问题讨论】：

能否请您提供一些关于答案的反馈或将其中一个标记为供未来用户接受。这就是 StackOverflow 的工作原理。

标签： jquery cycle jquery-cycle cycle-plugin

【解决方案1】：

更新。我对上次更新不满意，因为它确实有效，但本来可以更干净一些。

JSFiddle：

http://jsfiddle.net/lucuma/fg6d4/10/

$(document).ready(function() {
$('#sliders').hover(
function() {

    $('.controller', this).fadeIn();
}, function() {
    $('.controller', this).fadeOut();
});

$('#slideshow').cycle({
    prev: $('.controller .prev', this),
    next: $('.controller .next', this),
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        // you can easily adapt this to hide prev on firstslide and next on last slide
        if (options.currSlide < options.slideCount / 2) {
            $(options.prev).hide();
            $(options.next).show();
        } else {
            $(options.prev).show();
            $(options.next).hide();
        }

    }

});

});

HTML：

<div id="sliders">

    <div id="slideshow">

      <div><img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" /></div>
      <div><img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
      <div><img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>
   </div>
    <div class="controller">
      <a href="#" class="prev">prev</a>
      <a href="#" class="next">next</a>
    </div>
</div>

CSS：

#sliders{width:500px;height:500px;position:relative}
#slideshow {width:100%;height:100%;}
#sliders .controller {display:none;position:absolute;top:50px;z-index:100;width:100%;height:20px}
#sliders .controller a {background-color:white;padding:10px;color:red}
#sliders .controller a.next {position:absolute;right:0}

【讨论】：

【解决方案2】：

我认为您将不得不在图像顶部添加两个分层的元素，并在翻转时添加一个切换。 Cycle 不会自动切换或定位按钮。

【讨论】：

感谢您的快速回答，您能否给我一个示例或告诉我在哪里可以找到教程，因为我刚开始使用上面的教程开始 java 和 jquery..