0

jqueryサイクルプラグインから標準のjqueryスライドショーを作成しましたが、変更しませんでした。このチュートリアルに従った後は、すべてが正常に機能します。私の質問は、プラグインコードを変更する方法を知っている人はいますか？前のボタンと次のボタンの両方がmouseOverに表示されるのではなく、スライドショーのどちらの半分にマウスがあるかによって、そのうちの1つだけが表示されます。

誰かが私を助けてくれたら本当に嬉しいです:)

4

2 に答える 2

2

アップデート。前回の更新は機能していたので満足できませんでしたが、もう少しきれいになったかもしれません。

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

    }

});

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

画像の上にレイヤー化された 2 つの要素を追加し、ロールオーバーのトグルを追加する必要があると思います。サイクルは、ボタンを自動的に切り替えたり配置したりしません。

于 2012-06-01T11:36:50.450 に答える