一度に1つの要素を変更する

このコードで3つのスライドのグループをすべて表示し、その上にマウスを置いたときに画像を変更します。しかし、彼はすべてのもののように扱っています。個々のスライドのグループとして機能させることはできません。私は私が間違って一度に1つの要素を変更する

$(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

このコードを使用することをやっているかわかりません。


 
$(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

ループ内の各スライダに範囲を維持するために自己実行機能を使用します。

$(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

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

一度に1つの要素を変更する

答えて

関連する問題