Question

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

如果有人可以帮助我，我会很高兴：）

Answer 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}

Answer 2

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

jquery循环插件 - 操作next / prev按钮？

2 个答案: