2

次/前のボタンを備えた写真スライドに、以下の jquery .cycle プラグイン コードを使用しています。Firefox と Chrome ではすべてが完全に機能しますが、IE8 では機能しません。ボタンの 1 つをクリックすると、スライドが次の写真に変わり、両方のボタンが約 10 ～ 15 ピクセル上に移動します。そして、私が再びそれらにカーソルを合わせるまで、それらはそこにとどまります。もう一度クリックすると、再び上に移動します。私はグーグルとフォーラムで答えを探していましたが、うまくいきませんでした。さまざまな方法を試し、さまざまなバージョンの JQuery でテストしましたが、解決できませんでした。誰もそれを修正する方法を知っていますか? ありがとうございました！

<head>

$(function(){
    $("#imgslide").cycle({next:"#next",
              prev:"#prev",
              pause:true, 
              timeout:0,
              cleartypeNoBg: true,
              after: onAfter,

              });
});

function onAfter(curr,next,opts) {
            var index=opts.currSlide;
        $('#comment p:visible').hide();
            $('#comment p').eq(index).show();
        var caption = '' + (opts.currSlide + 1) + ' / ' + opts.slideCount;
        $('#caption').html(caption);
}

</head>

<body>

<div id="Container">
        <ul id="imgslide" style="height: 500px; list-style-type: none; margin:0; padding:0;">
            <li><img src="/images/portrait/image1.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image2.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image3.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image4.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image5.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image6.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image7.jpg" width="500px" height="500px"></li>
            <li><img src="/images/portrait/image8.jpg" width="500px" height="500px"></li>
        </ul>
        <div id="comment">
               <p>Title 1</p>
               <p>Title 2</p>
               <p>Title 3</p>
               <p>Title 4</p>
               <p>Title 5</p>
               <p>Title 6</p>
               <p>Title 7</p>
               <p>Title 8</p>
               </div>
        <a id="prev" style="cursor: pointer;" >Prev</a> |
        <a id="next" style="cursor: pointer; margin-left:2px">Next</a>
        <div style="display:inline; margin-left:10px" align="left" id="caption"></div>
</div>

</body>
4

1 に答える 1

1

問題を修正しました。

  1. 私は最新のJQueryバージョン1.7.2を使用していました。代わりに、次のパスを使用してバージョン 1.5 に変更しました。

    http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

  2. Jquery Cycle プラグインに関しては、小さいバージョンである jquery.cycle.lite.js を使用していましたが、より多くの機能を含む完全なものに変更しました。

    http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

これらの変更により、Internet Explorer IE8 で発生したボタン関連のバグが修正されたようです。そして今、ページはすべてのブラウザで問題なく動作します.

于 2012-06-20T23:29:11.860 に答える