鼠標懸停時的jQuery圖像滑塊和鼠標懸停時的重置

Question

我在滑塊上存在問題。

我想在mouseover上啓動滑塊，當我外出時，我想重置列表中第一個圖像上的圖像。

這是我的代碼：

<div id="slider1" class="fadein"> 
      <img class="" src="images/rotator/1_1.jpg" alt="1"> 
      <img src="images/rotator/1_2.jpg" alt="2"> 
      <img src="images/rotator/1_3.jpg" alt="3"> 
      </div> 

的jQuery：

$(document).ready(function(){ 

    var change_img_time = 3000; 
    var transition_speed = 300; 

    var simple_slideshow = $('#slider1'), 
     listItems = simple_slideshow.children('#slider1 img'), 
     listLen = listItems.length, 
     i = 0, 
     intervalId // Generated id for the interval timer 

     changeList = function() { 

      listItems.eq(i).fadeOut(transition_speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(transition_speed); 
      }); 

     }; 

    listItems.not(':first').hide(); 


    $('#slider1').on('mouseover', function() { 
     changeList(); // Do this once immediately 
     intervalId = setInterval(changeList, change_img_time); 
    }).on('mouseout', function() { 
     clearInterval(intervalId); // Stop slider 
     listItems(':first').css('z-index', '9999'); 
    });; 

}); 

請，有人可以幫忙嗎？

Answer 1

這是小提琴：

 var change_img_time = 3000; 
 
     var transition_speed = 300; 
 

 
     var simple_slideshow = $('#slider1'), 
 
      listItems = simple_slideshow.children('.fadein img'), 
 
      listLen = listItems.length, 
 
      i = 0, 
 
      intervalId, // Generated id for the interval timer 
 

 
      changeList = function() { 
 

 
       listItems.eq(i).fadeOut(transition_speed, function() { 
 
        i += 1; 
 
        if (i === listLen) { 
 
         i = 0; 
 
        } 
 
        listItems.eq(i).fadeIn(transition_speed); 
 
       }); 
 

 
      }; 
 

 
     listItems.not(':first').hide(); 
 

 

 
     $('#slider1').on('mouseover', function() { 
 
      console.log(listItems); 
 
      changeList(); // Do this once immediately 
 
      intervalId = setInterval(changeList, change_img_time); 
 
     }).on('mouseout', function() { 
 
      clearInterval(intervalId); // Stop slider 
 
      listItems(':first').css('z-index', '9999'); 
 
     });

.fadein { 
 
    position: relative; 
 
    /*overflow: hidden;*/ 
 

 
} 
 

 
.fadein img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.fadein img:nth-child(1) { 
 
    z-index: 9999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<div id="slider1" class="fadein"> 
 
       <img class="" src="http://placekitten.com/210/130" alt="1"> 
 
       <img src="http://placekitten.com/200/300" alt="2"> 
 
       <img src="http://placekitten.com/200/300" alt="3"> 
 
       </div>