一次更改一个元素

时间：2017-07-13 08:13:31

标签： jquery

我希望此代码显示所有3组幻灯片，当我将鼠标悬停在其上时，我会更改图像。但是他把所有事都当作一个对待。我无法将其作为单独的幻灯片组来工作。我不知道我做错了什么

＆＃13;
＆＃13; 
$(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
    });;



});
＆＃13; 
.exampleSlider {
    max-height: 250px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

使用此代码。

＆＃13;
＆＃13; 
   
$(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
});
});
＆＃13; 
.exampleSlider {
    max-height: 250px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用自执行功能来保留循环内每个滑块的范围。

＆＃13;
＆＃13; 
$(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);

  });

});
＆＃13; 
.exampleSlider {
  max-height: 250px;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

let app = XCUIApplication() app.maps.element.pinch(withScale: 0.9, velocity: -0.5) 是所有10个孩子的简单列表，没有父母的重要区别，这导致所有10个图像连续循环。每个listItem也应该有自己的独立索引，所以我添加了一个动态ul来存储索引。

以下是我认为最简单的JS设置：

attr
相关问题
最新问题