使用css和javascript的图像滑块

我不熟悉JavaScript/JQuery。我正在尝试只使用CSS和Jquery实现一个图像滑块。单击一个滑块的导航时，其他滑块的元素也开始移动。如果我为每个滑块使用单独的Id，那么它可以正常工作，但我不想为每个滑块使用单独的Id。如何检测单击了哪个滑块的导航并相应地移动元素

提前谢谢

这是

Jquery

$(document).ready(function() {
  var slidestash;
  var lastindex = $(".live .ul .li").length - 1;
  var numstashed = 2;

  function setup() {
    $(".live")
      .attr('aria-label', "Rotating list of statistics")
      .attr('aria-live', 'polite')
      .attr('aria-relevant', 'additions')
      .attr('aria-atomic', 'false');
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
  }
  setup();

  $("html").removeClass("js");

  $(".prev").click(function() {

  $(".live .ul").prepend(slidestash);
    slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  });

  $(".next").click(function() {
    $(".live .ul").append(slidestash);
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  })
});

---

您的思路是正确的，但需要限制元素的上下文。例如，

prev

按钮应该只影响包含该按钮的滑块

为此，可以使用

.container

元素作为滑块的根，并搜索其中的元素

例如：

$(".prev").click(function() {
    var container = $(this).parents(".outer_pro_layer").first();
    // or $(this).closest(".outer_pro_layer") or $(this).parent(".outer_pro_layer")
    container.find(".live .ul").prepend(slidestash);
    slidestash = container.find(".live .ul .li:nth-child(n+"+lastindex+")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});

---

你想在这里做的是

将运行滑块的所有代码放在一个函数中

在每个滑块实例上运行该函数

将一个实例中的代码限制为仅应用于该元素内部

前两点很简单：

一,

二,

对于3，您需要将实例-

$（e）

-作为第二个参数（分隔符）传递给函数中的所有jQuery选择器，以告诉jQuery：“仅在该元素内选择”。
例如，

$（“.live”）

将变成

$（“.live”，$（e））

在这里，工作：

$（窗口）.on（'load'，function（））{
$（“html”）.removeClass（“js”）；
$（'.presentation'）。每个（函数（即，e）{
第一阶段（e）；
});
函数初始化滑块（e）{
斯莱德斯塔什先生，
lastindex=$（.live.ul.li），$（e））.length-1，
numstashed=2；
函数设置（）{
$（“.live”，$（e））
.attr（'aria-label'，“轮换统计列表”）
.attr（'aria-live'，'polite'）
.attr（'aria-related'，'additions'）
.attr（'aria-atomic'，'false'）；
slidestash=$（“.live.ul.li:n子项（-n+“+numstashed+”），$（e））.detach（）；
}
设置（）；
$（“.prev”，$（e））。单击（函数（）{
$（.live.ul），$（e））.prepend（slidestash）；
slidestash=$（“.live.ul.li:n子级（n+“+lastindex+”），$（e））.detach（）；
if（！$（this.is（“：focus”）$（this.focus（）；//iOS hack
});
$（“.next”，$（e））。单击（函数（）{
$（.live.ul），$（e））.append（slidestash）；
slidestash=$（“.live.ul.li:n子项（-n+“+numstashed+”），$（e））.detach（）；
if（！$（this.is（“：focus”）$（this.focus（）；//iOS hack
})
}
})

.sr{
位置：绝对位置；
剪辑：rect（1px 1px 1px 1px）；
剪辑：rect（1px，1px，1px，1px）；
填充：0；
边界：0；
高度：1px；
宽度：1px；
溢出：隐藏；
}
.ul{
溢出：隐藏；
高度：100px；
}
李先生{
显示：内联块；
文本对齐：居中；
高度：100px；
背景：#ccc；
}
.js#现场直播{
显示：无；
}

以前的
1.
2.
3.
4.
5.
6.
下一个
以前的
A.
B
C
D
E
F
下一个

可能没有帮助，但是为什么不为每个滑块使用单独的ID呢？这似乎是一个非常简单且完全合理的问题解决方案，同时也是id属性的作用——使您能够唯一地引用单个元素。“…仅使用CSS和Jquery”-您成就了我的一天！不要忘记接受你认为正确的答案。我们期待着你的消息。不要只是问就走。如果我需要在最后一个元素停止滑块，那么这个过程是什么？您需要修改在

$（'.next'）

和

$（'.prev'）

上运行的函数，并且仅当您不是在最后一个（在下一个）或第一个（在上一个）上时才执行代码。但这应该是一个单独的问题。原则是：我不仅帮助你，我也帮助任何有类似问题的人。好吧……让我来检查一下。感谢您指正了我的答案，您应该选择

.outer\u pro\u layer

或

.presentation

作为滑块容器来实现此功能。

$(document).ready(function() {
  var slidestash;
  var lastindex = $(".live .ul .li").length - 1;
  var numstashed = 2;

  function setup() {
    $(".live")
      .attr('aria-label', "Rotating list of statistics")
      .attr('aria-live', 'polite')
      .attr('aria-relevant', 'additions')
      .attr('aria-atomic', 'false');
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
  }
  setup();

  $("html").removeClass("js");

  $(".prev").click(function() {

  $(".live .ul").prepend(slidestash);
    slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  });

  $(".next").click(function() {
    $(".live .ul").append(slidestash);
    slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
  })
});

$(".prev").click(function() {
    var container = $(this).parents(".outer_pro_layer").first();
    // or $(this).closest(".outer_pro_layer") or $(this).parent(".outer_pro_layer")
    container.find(".live .ul").prepend(slidestash);
    slidestash = container.find(".live .ul .li:nth-child(n+"+lastindex+")").detach();
    if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});

 function initSlider(e) {
   ..code here...
 }

 $('presentation').each(function(i,e) {
   initSlider(e);
 })