2

我正在使用下面的 jquery .cycle 插件代码来制作带有下一个/上一个按钮的照片幻灯片。一切都在 Firefox 和 Chrome 中完美运行，但在 IE8 中却不行。在我单击其中一个按钮并且幻灯片切换到下一张照片后，两个按钮都向上移动了大约 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 回答