jQuery Cycle Plugin PagerとIE7と8で奇妙な問題が発生しました

Question

Cycleプラグインを使用し、サムネイル画像をポケベルとして使用してサイトを構築しています。 Firefox、Chrome、IE9でうまく動作します。 IE8と7では本当に奇妙な問題があります。

ページャの最初の画像とスライドショーがうまく読み込まれます。 2番目のサムネイルをクリックして2番目の画像を読み込むと、3番目のサムネイルをクリックすると、スライドショーが白くなります（画像がロードされていないか、完全にはわからない画像がロードされているように見えます）スライドショーの第2の画像をロードする。画像をロードせずに間違った画像をロードするというこのパターンは、スライドショー全体にわたって続きます。

は、ここで実際のjQueryの：

$(document).ready(function() { 
    $('#gallery').cycle({ 
     fx: 'scrollHorz', 
     speed: 500, 
     timeout: 0, 
     pager: '#slide_navigation', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '#slide_navigation li:eq(' + idx + ') a'; 
     } 
    }); 
    $("#left").click(function() { 
     $("#slide_navigation").animate({"marginLeft": "+=960px"}, "slow"); 
     $("#left").hide(); 
     $("#right").show(); 
    }); 
    $("#right").click(function() { 
     $("#slide_navigation").animate({"marginLeft": "-=960px"}, "slow"); 
     $("#right").hide(); 
     $("#left").show(); 
    }); 

ここでは、ページのCSSです：

#slide_navigation { 
    width: 2000px; 
    padding: 10px 0; 
    border: 1px #909090; 
    border-style: solid none; 
} 
#slide_navigation li { 
    list-style: none; 
    display: inline; 
    margin: 5px; 
    padding: 52px 3px 0px 3px; 
} 
#slide_navigation li:first-child { 
    margin-left: 25px; 
} 
#slide_navigation li.activeSlide { 
    background: #F68009; 
} 
#left { 
    width: 20px; 
    height: 75px; 
    float: left; 
    background: #FFFFFF url(prev1.png) no-repeat center; 
    position: relative; 
    top: -85px; 
    left: -3px; 
    margin-bottom: -85px; 
    display: none; 
} 
#right { 
    width: 20px; 
    height: 75px; 
    float: right; 
    background: #FFFFFF url(next1.png) no-repeat center; 
    position: relative; 
    top: -85px; 
    right: -3px; 
    margin-bottom: -85px; 
} 

そして、ちょうど場合は - 彼がポケットベルのためのHTMLです：

<div id="slide_navigation"> 
    <li><a href="#"><img src=support-1.jpg></a></li> 
    <li><a href="#"><img src=support-2.jpg></a></li> 
    <li><a href="#"><img src=support-3.jpg></a></li> 
    <li><a href="#"><img src=support-4.jpg></a></li> 
    <li><a href="#"><img src=support-5.jpg></a></li> 
    <li><a href="#"><img src=support-6.jpg></a></li> 
    <li><a href="#"><img src=support-7.jpg></a></li> 
    <li><a href="#"><img src=support-8.jpg></a></li> 
    <li><a href="#"><img src=support-9.jpg></a></li> 
    <li><a href="#"><img src=support-10.jpg></a></li> 
    <li><a href="#"><img src=support-11.jpg></a></li> 
    <li><a href="#"><img src=support-12.jpg></a></li> 
    <li><a href="#"><img src=support-13.jpg></a></li> 
    <li><a href="#"><img src=support-14.jpg></a></li> 
    <li><a href="#"><img src=support-15.jpg></a></li> 
    <li><a href="#"><img src=support-16.jpg></a></li> 
</div> 
<div id="left" class="cursorPointer"></div> 
<div id="right" class="cursorPointer"></div> 

左右のidは、スライダーをナビゲートするのに役立ちます。それが関連しているとは思っていませんが、できるだけ多くの情報を提供しています。どんな助けでも大歓迎です。

ありがとうございます！

Answer 1

タグのエンディングが一致しませんでした。終了</a>には対応する<a>開始タグがないことに注意してください。開始タグを入力しても問題ありません。

<div id="gallery"> 
    <img src=http://www.howie23.org/rp-help/1.jpg></a> 
    <img src=http://www.howie23.org/rp-help/2.jpg></a> 
    <img src=http://www.howie23.org/rp-help/3.jpg></a> 
    <img src=http://www.howie23.org/rp-help/4.jpg></a> 
    <img src=http://www.howie23.org/rp-help/5.jpg></a> 
    <img src=http://www.howie23.org/rp-help/6.jpg></a> 
    <img src=http://www.howie23.org/rp-help/7.jpg></a> 
    <img src=http://www.howie23.org/rp-help/8.jpg></a> 
</div> 

パッチが適用されたデモ：http://jsbin.com/ukizac/3/edit#preview