Javascript 使用相同脚本进行多个幻灯片放映

我有我的目标正确的代码，但它的作品为一个单一的幻灯片；对于多个幻灯片放映，无论我将鼠标移到何处，都会使所有幻灯片放映运行，这取决于同一个类，但如果我尝试分配不同的类，则会造成混乱：

function slideImages(){
      var $active = $('.portfolio_slider .active');
      var $next = ($('.portfolio_slider .active').next().length > 0) ? $('.portfolio_slider .active').next() : $('.portfolio_slider img:first');
      $next.css('z-index',2);
      $active.css('z-index',1);
      $next.animate({left:0},"fast",function(){

              $next.addClass('active');
        });
    }

    $(document).ready(function(){

    $('.portfolio_slider').on('mouseover', function(){
        setInterval(slideImages, 400);
        $(this).off('mouseover');

    })
})

css:

我对js jquery很陌生…有什么帮助吗

html:

---

您应该将要使用的滑块传递给

slidemages

函数，然后只使用其元素

function slideImages(slider){ // slider is the element
      var $active = $('.active', slider); // search for .active in this element
      var $next = ($('.active', slider).next().length > 0) ? $('.active', slider).next() : $('img:first', slider);
      $next.css('z-index',2);
      $active.css('z-index',1);
      $next.animate({left:0},"fast",function(){

              $next.addClass('active');
        });
    }

    $(document).ready(function(){

    $('.portfolio_slider').on('mouseover', function(){
        var _this = this; // save it for other context
        setInterval(function(){
            slideImages(_this);
        }, 400);
        $(this).off('mouseover');

    });
});

---

你能展示你的html代码来查看幻灯片的结构吗？如果我想让幻灯片在每一个鼠标上运行，而不是只运行一次呢？或者如果我想要不同大小（div）的幻灯片，你可以删除

$（this）.off（'mouseover'）以便它将运行多次。我不太明白你的第二个问题，你能澄清一下吗？哦，对了，删除
$（this）.off（'mouseover'）将使它在每次移动鼠标时运行。您可能希望侦听事件。即使我删除$（this）.off（'mouseover'）；每个幻灯片只运行一次，我错过了什么？第二个问题：分配相同的公文包\u滑块类，每个幻灯片必须有相同的大小？哦，我想它正在运行，刚刚完成，没有被重置。即使它们的尺寸不完全相同，它也应该能工作。
<div class="portfolio_slider"> 
<img class="active" src="1.jpg" width="100" height="170">
<img src="2.jpg" width="100" height="170">
<img src="3.jpg" width="100" height="170">
<img src="5.jpg" width="100" height="170">
<img src="6.jpg" width="100" height="170">
<img src="1.jpg" width="100" height="170">

</div>

function slideImages(slider){ // slider is the element
      var $active = $('.active', slider); // search for .active in this element
      var $next = ($('.active', slider).next().length > 0) ? $('.active', slider).next() : $('img:first', slider);
      $next.css('z-index',2);
      $active.css('z-index',1);
      $next.animate({left:0},"fast",function(){

              $next.addClass('active');
        });
    }

    $(document).ready(function(){

    $('.portfolio_slider').on('mouseover', function(){
        var _this = this; // save it for other context
        setInterval(function(){
            slideImages(_this);
        }, 400);
        $(this).off('mouseover');

    });
});