0

DIVスルーループで各画像を選択するjqueryがあります。カルーセルやスライダーのようなものです。にdivは 10 個の画像があり、divに設定されていますoverflow: auto;

画像番号 6 に到達すると、次の画像 image(7) が選択されましたが、表示されませんでした (つまり、スクロール バーが上がらなかったということです)。Divスクロールバーが上がるように設定するにはどうすればよいですか?スクロールwindowバーは同じままです(動きません)。

私はネットをチェックしましたが、これは私が得た最も近い答えですが、スクロールなしのIE、jQueryフォーカスでは機能しません。

誰かが私を助けたり、これについてアイデアをくれたりできますか?

4

1 に答える 1

0

ありがとうプラビーン

これにはJqueryを使用しています。基本的にコードの流れは、右の画像と左の画像があります（右の画像はスライドし、左の画像を表示します）。コードは問題ありませんが、IE を使用してテストすると問題が発生します。ウィンドウのスクロールも動いているので、divのみスクロールしたいです。クロムとファイアフォックスでうまく動作します

以下は私のコードです。

enter code here



$(document).ready(function () {
       //To store timeout id
   var timeoutId,indx;
   var slideImage = function (step) {

       //Clear timeout if any
       clearTimeout(timeoutId);


           if (step == undefined) step = 1;

           //Get current image's index
           var indx = $('.item:visible').index('.item');

           //If step == 0, we don't need to do any fadein our fadeout
           if (step != 0) {
               //Fadeout this item //:eq() selector selects an element with a specific index number
               $('.item:visible').stop(true, true).fadeOut("slow");
               $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "white");
           }

           //Increment for next item
           indx = indx + step;

           //Check bounds for next item
           if (indx >= $('.item').length) {
               indx = 0;
           } else if (indx < 0) {
               // use for previous button
               indx = $('.item').length - 1;
           }


           //If step == 0, we don't need to do any fadein our fadeout
           if (step != 0) {

               //Fadein next item
               $('.item:eq(' + indx + ')').stop(true, true).fadeIn("slow");

               //focus on the image
               $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "#6BB9E7");
               $('.imageloop:eq(' + indx + ')').stop(true, true).attr("tabindex", indx).focusWithoutScrolling();

               prevIndex = indx;
           }


}


  $.fn.focusWithoutScrolling = function () {
       var x = window.scrollX, y = window.scrollY;
       this.focus();
       window.scrollTo(x, y);

       };

   };


 <div id='left_img'  >
   <div class='item'><img src="1.jpg" /></div>
   <div class='item'><img src="2.jpg" /></div>
   <div class='item'><img src="3.jpg" /></div>
   <div class='item'><img src="4.jpg" /></div>
   <div class='item'><img src="5.jpg" /></div>
   <div class='item'><img src="6.jpg" /></div>
   <div class='item'><img src="7.jpg" /></div>
   <div class='item'><img src="8.jpg" /></div>
   <div class='item'><img src="9.jpg" /></div>
   <div class='item'><img src="10.jpg" /></div>                        
 </div>

<div id = 'right_img'> 
   <div class='imageloop'tabindex='0'><img src="1.jpg" /></div>
   <div class='imageloop'tabindex='1'><img src="2.jpg" /></div>
   <div class='imageloop'tabindex='2'><img src="3.jpg" /></div>
   <div class='imageloop'tabindex='3'><img src="4.jpg" /></div>
   <div class='imageloop'tabindex='4'><img src="5.jpg" /></div>
   <div class='imageloop'tabindex='5'><img src="6.jpg" /></div>
   <div class='imageloop'tabindex='6'><img src="7.jpg" /></div>
   <div class='imageloop'tabindex='7'><img src="8.jpg" /></div>
   <div class='imageloop'tabindex='8'><img src="9.jpg" /></div>
   <div class='imageloop'tabindex='9'><img src="10.jpg" /></div>                       

</div>
于 2013-01-24T03:14:54.457 に答える