2012-06-20 3 views
2

다음/이전 버튼이있는 사진 슬라이드에 jquery .cycle 플러그인 코드를 사용하고 있습니다. 모든 것이 Firefox와 Chrome에서는 완벽하게 작동하지만 IE8에서는 완벽하게 작동하지 않습니다. 단추 중 하나를 클릭하고 슬라이드가 다음 사진으로 변경되면 두 단추가 약 10-15 픽셀 위로 이동합니다. 그리고 나서 나는 그들 위에 다시 머물 때까지 거기에 머물러 있습니다. 다시 클릭하면 다시 위로 이동합니다. 나는 행운이없는 Google 및 포럼에 대한 답변을 찾고있었습니다. 다른 방법으로 시도해 보았고 다른 버전의 JQuery로 테스트 해 보았지만 해결할 수 없었습니다. 아무도 그 문제를 해결하는 법을 압니다. 고맙습니다!IE에서 이상한 jquery .cycle 플러그인 다음/이전 버튼 동작

<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> 
+0

나를 위해 일어나는 일이 아닙니다. http://jsfiddle.net/85nzq/20/ –

+0

@KevinB 그것은 포럼에서 저를 위해 어제 쓴 코드를 기반으로합니다 .. :) 이상하게도, 나는이 문제를 경험하고 있습니다. jsfiddle 너무. 몇 사람에게 내 브라우저와 관련이 있는지 테스트 해달라고 요청할 것입니다. – elliotgray

+0

호환성 모드로 실행 중이십니까? IE7이 아니라 IE7이 문제가된다. IE7을 테스트하지 않았습니다. –

답변

1

문제가 해결되었습니다.

  1. 저는 최신 JQuery 버전 1.7.2를 사용하고있었습니다. 대신 다음 경로를 사용하여 버전 1.5로 변경했습니다. JQuery와 사이클 플러그인으로

    http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js 
    
  2. , 나는 작은 버전 인, jquery.cycle.lite.js를 사용했지만, 난 더 많은 기능을 포함하는 전체 하나에 변경;

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

이러한 변화는 인터넷 익스플로러 IE8 발생했습니다 버튼 관련 버그를 수정하는 것. 이제는 모든 브라우저에서 페이지가 문제없이 작동합니다.

관련 문제