0

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

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

4

2 回答 2

2

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

JSF中：

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();
        }

    }

});

});​​​​</p>

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}

​</p>

于 2012-06-01T20:40:19.387 回答
0

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

于 2012-06-01T11:36:50.450 回答