使用css和javascript的圖像滑塊

Question

我是JavaScript / JQuery的新手。 我正在嘗試僅使用CSS和Jquery實現圖像滑塊。 單擊一個滑塊的導航時，其他滑塊的元素也會開始移動。 如果我為每個滑塊使用單獨的Id，那么它工作正常，但我不想為每個滑塊使用單獨的Id。 我將如何檢測單擊哪個滑塊的導航並相應地移動元素。

提前致謝！！

這是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;
}

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

Answer 1

您處於正確的軌道上，但您需要限制元素的上下文。 例如， 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
});

Answer 2

你想在這做什么

1. 將所有用於運行滑塊的代碼放在一個函數中
2. 在每個滑塊實例上運行該函數
3. 限制一個實例的代碼僅應用於該元素。

前兩點很簡單：

1。

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

2。

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

對於3，你需要將實例 - $(e) - 傳遞給函數中的所有jQuery選擇器，作為第二個param（分隔符），告訴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現在可以正常工作。 如果您需要更多幫助，請將您的代碼轉換為實時代碼段，這樣我就可以看到我正在做什么以及它應該如何看待。