1. 首頁
  2. 問答
  3. 同時更改一個元素

同時更改一個元素

2017-07-13 90 views
0

我希望此代碼顯示所有3組幻燈片，並且當我將鼠標懸停在上面時，我會更改圖像。但他把一切都當作一樣。我無法將其作爲單個幻燈片組工作。我不知道我做錯了同時更改一個元素

$(function() { 
 

 
    /* SET PARAMETERS */ 
 
    var change_img_time = 1000; 
 
    var transition_speed = 0; 
 

 
    var simple_slideshow = $(".exampleSlider"), 
 
     listItems = simple_slideshow.children('li'), 
 
     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(); 
 

 

 
    $('.exampleSlider').on('mouseenter', function() { 
 
     changeList(); // Do this once immediately 
 
     intervalId = setInterval(changeList, change_img_time); 
 
    }).on('mouseleave', function() { 
 
     clearInterval(intervalId); // Stop slider 
 
    });; 
 

 

 

 
});
.exampleSlider { 
 
    max-height: 250px; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Rota</title> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 
<body> 
 
<p> 
 
<h3>Slide 1</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/f4f4" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/0000" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/f4f6" alt="" /></li> 
 
</ul> 
 
</p> 
 
<p> 
 
<h3>Slide 2</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/D90000" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/D96D00" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/0000FF" alt="" /></li> 
 
</ul> 
 
</p> 
 
<p> 
 
<h3>Slide 3</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/99FFCC" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/C926FF" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/00B200" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/777777" alt="" /></li> 
 
</ul> 
 
</p> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 

 
</body> 
 
</html>

來源

2017-07-13 Bruno Andrade

回答

1

使用此代碼。


 
$(function() { 
 

 
/* SET PARAMETERS */ 
 
var change_img_time = 1000; 
 
var transition_speed = 0; 
 

 
var simple_slideshow = $(".exampleSlider"); 
 
    
 
simple_slideshow.each(function(ind){ 
 
    
 
    listItems =$(this).children('li'), 
 
    listItems.not(':first').hide(); 
 
    
 
}); 
 
simple_slideshow.on('mouseenter', function() { 
 
    r=0; 
 
    listItems =$(this).children('li'), 
 
    listLen = listItems.length, 
 
    $(this).children('li').each(function(indx){ 
 
     if($(this).not(":hidden").length) 
 
      r=indx 
 
    }); 
 
    listItems.eq(r).fadeOut(transition_speed, function() { 
 
     r += 1; 
 
     if (r === listLen) { 
 
      r = 0; 
 
     } 
 
     listItems.eq(r).fadeIn(transition_speed); 
 
    }); 
 
    
 
    intervalId = setInterval(function(){ 
 
     listItems.eq(r).fadeOut(transition_speed, function() { 
 
      r += 1; 
 
      if (r === listLen) { 
 
       r = 0; 
 
      } 
 
      listItems.eq(r).fadeIn(transition_speed); 
 
     })}, 
 
     change_img_time 
 
    ); 
 
}).on('mouseleave', function() { 
 
     clearInterval(intervalId); // Stop slider 
 
}); 
 
});
.exampleSlider { 
 
    max-height: 250px; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Rota</title> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 
<body> 
 
<p> 
 
<h3>Slide 1</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/f4f4" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/0000" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/f4f6" alt="" /></li> 
 
</ul> 
 
</p> 
 
<p> 
 
<h3>Slide 2</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/D90000" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/D96D00" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/0000FF" alt="" /></li> 
 
</ul> 
 
</p> 
 
<p> 
 
<h3>Slide 3</h3> 
 
<ul class="exampleSlider"> 
 
    <li><img src="http://via.placeholder.com/350x150/99FFCC" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/C926FF" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/00B200" alt="" /></li> 
 
    <li><img src="http://via.placeholder.com/350x150/777777" alt="" /></li> 
 
</ul> 
 
</p> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 

 
</body> 
 
</html>

來源

2017-07-13 09:30:29 ravi2432

1

使用自執行的函數，以便保持環路內的每個滑塊的範圍。

$(function() { 
 

 
    /* SET PARAMETERS */ 
 
    var transition_speed = 1000; 
 
    var change_img_time = transition_speed * 2; 
 

 
    $(".exampleSlider").each((index, slider) => { 
 

 
    (function(slider) { 
 

 
     var listItems = $(slider).children('li'); 
 
     var listLen = listItems.length; 
 
     var i = 0; 
 
     var intervalId; 
 
     var changeList = function() { 
 
     console.log(`SLIDER ${index} - IMAGE: ${listItems.eq(i).find("img").attr("src")}`); 
 
     listItems.eq(i).fadeOut(transition_speed, function() { 
 
      i += 1; 
 
      if (i === listLen) { 
 
      i = 0; 
 
      } 
 
      listItems.eq(i).fadeIn(transition_speed); 
 
     }); 
 
     }; 
 

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

 
     $(slider).on('mouseenter', slider, function() { 
 
     changeList(); // Do this once immediately 
 
     intervalId = setInterval(changeList, change_img_time); 
 
     }).on('mouseleave', function() { 
 
     clearInterval(intervalId); // Stop slider 
 
     }); 
 

 
    })(slider); 
 

 
    }); 
 

 
});
.exampleSlider { 
 
    max-height: 250px; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Rota</title> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 

 
<body> 
 
    <p> 
 
    <h3>Slide 1</h3> 
 
    <ul class="exampleSlider"> 
 
     <li><img src="http://via.placeholder.com/350x150/f4f4f4" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/000000" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/dddddd" alt="" /></li> 
 
    </ul> 
 
    </p> 
 
    <p> 
 
    <h3>Slide 2</h3> 
 
    <ul class="exampleSlider"> 
 
     <li><img src="http://via.placeholder.com/350x150/D90000" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/D96D00" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/0000FF" alt="" /></li> 
 
    </ul> 
 
    </p> 
 
    <p> 
 
    <h3>Slide 3</h3> 
 
    <ul class="exampleSlider"> 
 
     <li><img src="http://via.placeholder.com/350x150/99FFCC" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/C926FF" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/00B200" alt="" /></li> 
 
     <li><img src="http://via.placeholder.com/350x150/777777" alt="" /></li> 
 
    </ul> 
 
    </p> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 

 
</body> 
 

 
</html>

來源

2017-07-13 09:44:32 Vanojx1

1

listItem是所有的10個孩子的簡單列表，沒有父母的關鍵的區別，這將導致所有的10張圖像循環連續。每個ul也應該有自己的獨立索引，所以我加了一個動態attr來存儲索引。

這裏就是我想對你設置了最簡單的JS：

var change_img_time = 1000; 
var transition_speed = 200; 
var simple_slideshow = $(".exampleSlider"); 

function changeList(slide) { 
    var listItems = slide.children('li'); 
    var i = parseInt(slide.attr('curr')); 

    listItems.eq(i).fadeOut(transition_speed, function() { 
    i += 1; 
    if (i == listItems.length) i = 0; 
    slide.attr('curr', i); 
    listItems.eq(i).fadeIn(transition_speed); 
    }); 
}; 

// initialize 
simple_slideshow.each(function(){ 
    $(this).children('li').not(':first').hide(); 
    $(this).attr('curr', 0); 
}); 

var intervalId; 
$('.exampleSlider').on('mouseenter', function() { 
    var slide = $(this); 
    changeList(slide); 
    intervalId = setInterval(function(){changeList(slide);}, change_img_time); 
}).on('mouseleave', function() { 
    clearInterval(intervalId); 
});

來源

2017-07-13 09:53:55 user2464424

相關問題

 相關問題