0

Jquery Cycle プラグインhttp://malsup.com/jquery/cycle/を使用してメニュー ドライバーのスライドショーを作成しようとしていますが、正しく動作させる方法がわかりません。ナビに数字を入れる？また、自動的に循環させたいのですが、メニュー項目にカーソルを合わせると停止します。

このプラグインと同様に動作するようにしたい (他の jquery と競合する mootools であるため、これを使用できないことに注意してください) http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Demo /

これは私が実装している私のコードです

<script type="text/javascript" src="js/jquery.cycle.all.2.72v2.js.gz"></script>   
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        speed:       200,
        timeout:     0,
        pager:      '#nav',
        pagerEvent: 'mouseover',
        activePagerClass: 'activeSlide', // class name used for the active pager element
    });
});
</script>

<div id="nav">
        <a href="#">test1</a>
        <a href="#">test2</a>
        <a href="#">test3</a>
        <a href="#">test4</a>
        <a href="#">test5</a>
        <a href="#">test6</a>
      </div>        
<div id="slideshow"  class="pics">
<a href="#"><img src="images/1.jpg" alt="#" /></a>
<a href="#"><img src="images/2.jpg" alt="#" /></a>
<a href="#"><img src="images/3.jpg" alt="#" /></a>
<a href="#"><img src="images/4.jpg" alt="#" /></a>
<a href="#"><img src="images/5.jpg" alt="#" /></a>
<a href="#"><img src="images/6.jpg" alt="#" /></a>                           
</div>

助けてくれてありがとう ジュディス

4

1 に答える 1

1

競合の想定は、 $ use の代わりにハンドルにするjQueryことも、独自のカスタム ID を使用することもできるため、jquery は次のようにして jq を使用するように設定できます。

var jq=$.noConflict();

これは、jquery と mootools の両方を一緒に使用しても問題がないことを意味します。

あなたが見つけたこのプラグインには、ホーブでの一時停止を有効にする一時停止オプションがあります。こちらを参照してください。だからあなたの場合：

$(function() {
    $('#slideshow').cycle({
        speed:       200, //timer removed so it cycles automatically.
        pager:      '#nav',
        pause:      1, //pause on hover
        pagerEvent: 'mouseover',
        after: onAfter,
        activePagerClass: 'activeSlide' //Remove comma here
    });
});

//Use this to add/remove styling to your #navs.
function onAfter() { 
 }

また、コンテナの各子はスライドであると述べているため、あなたの場合はスライドになるので<a>、divでラップすることをお勧めします:)

于 2012-06-13T09:06:36.520 に答える