javascript - 使用 css 和 javascript 的图像 slider

Question

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

提前致谢!

这里是 Demo

<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

查询

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

Answer 1

你想在这里做的是

1. 将运行 slider 的所有代码放在一个函数中
2. 在每个 slider 实例上运行该函数
3. 将来自一个实例的代码限制为仅在该元素内应用。

前两点很简单:

1.

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

2.

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

对于 3，您需要将实例 - $(e) - 作为第二个参数(分隔符)传递给函数中的所有 jQuery 选择器，以告诉 jQuery:“仅在此内部选择元素”。
例如，$(".live") 将变为 $(".live", $(e))。

在这里，工作:

$(window).on('load', function() {
  $("html").removeClass("js");
  $('.presentation').each(function(i, e) {
    initSlider(e);
  });

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

    function setup() {
      $(".live", $(e))
        .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 + ")", $(e)).detach();
    }
    setup();



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

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

.sr {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
 .ul {
     overflow:hidden;
     height:100px;
}
 .li {
     display: inline-block;
     text-align:center;
     height:100px;
     background:#ccc;
}
 .js #live {
     display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
   <div class="row">
      <div class="col-sm-12">
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>1</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>2</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>3</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>4</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>5</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>6</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
         <div class="outer_pro_layer">
            <div class="presentation">
               <button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
               <div class="live">
                  <div class="ul">
                     <div class="col-sm-3 li">
                        <div>A</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>B</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>C</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>D</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>E</div>
                     </div>
                     <div class="col-sm-3 li">
                        <div>F</div>
                     </div>
                  </div>
               </div>
               <button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
            </div>
         </div>
      </div>
   </div>
</div>

如您所见，JavaScript 现在可以正常工作了。如果您需要更多帮助，请将您的代码变成一个实时片段，这样我就可以看到我在做什么以及它应该是什么样子。