jQuery 嵌套滑块动画

Question

尝试使用 jQuery 构建嵌套滑块。但是我对选项卡的逻辑有疑问。下一个和上一个按钮很容易创建，因为它们有一个简单的逻辑来增加或减少值。对于锚定幻灯片，根据单击的选项卡实现动画的最佳逻辑是什么。

我已经停止编码，因为我不确定如何应用逻辑。

jQuery(document).ready(function($) {

  var btnStatus = 1;
  var n = $(".sliderContent").length;
  var mainButtons = $('#main > a').map(function() {
    return this.id;
  }).get();
  var offset = 980;


  function buttonCheck() {
    if (btnStatus === 1) {
      $('.btnPrevious').attr("disabled", true);
    } else {
      $('.btnPrevious').removeAttr("disabled");
    }
    if (btnStatus >= n) {
      $('.btnNext').attr("disabled", true);
    } else {
      $('.btnNext').removeAttr("disabled");
    }
  }

  buttonCheck();


  $(".btnNext").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "+=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus + 1
    buttonCheck();
  });

  $(".btnPrevious").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "-=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus - 1
    buttonCheck();
  });

  window.log = function() {
    if (this.console) {
      console.log(Array.prototype.slice.call(arguments));
    }
  };
  jQuery.fn.log = function(msg) {
    console.log("%s: %o", msg, this);
    return this;
  };

  // $(arr).log(); //show an array of all elements with classname class




  jQuery.each(mainButtons, function(index, value) {

    $('#' + this).click(function() {

      $('#main-slideshow').animate({
        opacity: 1,
        right: "+=" + offset,
      }, 500, function() {});

    });
  });


});

body {
  font-weight: normal;
  font-size: 15px;
  color: #000000;
}
header {
  height: 50px;
  background-color: #99CCFF;
}
footer {
  height: 50px;
  background-color: #99CCFF;
}
.test {
  font-size: 500px;
}
section {
  float: left;
}
.sliderContainer {
  overflow: hidden;
  width: 980px;
  height: 480px;
  background-color: gray;
}
.sliderContent {
  width: 980px;
  height: 480px;
  position: relative;
  float: left;
}
#wrapper {
  position: relative;
  width: 2940px;
}
#content01 {
  background-color: #E2E2E2;
}
#content02 {
  background-color: rgb(213, 255, 213);
}
#content03 {
  background-color: rgb(247, 247, 168);
}
/*OUTER SLIDESHOW*/

#main-slideshow {
  width: 1960px;
  height: 480px;
  position: relative;
  width: 2940px;
}
button {
  position: absolute;
  top: 210px;
}
.btnPrevious {
  left: 0px;
}
.btnNext {
  left: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main">
  <a id="tab1" href="#">Tab 1</a> |
  <a id="tab2" href="#">Tab 2</a> |
  <a id="tab3" href="#">Tab 3</a> |
  <a id="tab4" href="#">Tab 4</a>
</nav>

<div id="main-slideshow">
  <section>
    <div class="sliderContainer">


      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 01 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1> Section 01 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 01 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <section>
    <div class="sliderContainer">

      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 02 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1>Section 02 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 02 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <button class="btnPrevious" type="button">&lt; &lt;</button>
  <button class="btnNext" type="button">&gt; &gt;</button>
</div>

Answer 1

您可以非常轻松地实现此功能，重新使用 下一个和上一个 的代码。

  if(currentIndex < btnStatus)  { // go back to the selected index
     for(var i = btnStatus; i > currentIndex; i--) 
     {
           $("#wrapper").animate({
              opacity: 1,
             right: "-=" + offset,
           }, 500, function() {});
           btnStatus = btnStatus - 1
     }

  } else if(currentIndex > btnStatus) { // go forward to the selected index
     for(var i = btnStatus; i < currentIndex; i++)
     {
           $("#wrapper").animate({
              opacity: 1,
             right: "+=" + offset,
           }, 500, function() {});
           btnStatus = btnStatus + 1
     }
  }

有关工作示例，请参阅 snnipet。

jQuery(document).ready(function($) {

  var btnStatus = 1;
  var n = $(".sliderContent").length;
  var mainButtons = $('#main > a').map(function() {
    return this.id;
  }).get();
  var offset = 980;


  function buttonCheck() {
    if (btnStatus === 1) {
      $('.btnPrevious').attr("disabled", true);
    } else {
      $('.btnPrevious').removeAttr("disabled");
    }
    if (btnStatus >= n) {
      $('.btnNext').attr("disabled", true);
    } else {
      $('.btnNext').removeAttr("disabled");
    }
  }

  buttonCheck();


  $(".btnNext").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "+=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus + 1
    buttonCheck();
  });

  $(".btnPrevious").click(function() {
    $("#wrapper").animate({
      opacity: 1,
      right: "-=" + offset,
    }, 500, function() {});
    btnStatus = btnStatus - 1
    buttonCheck();
  });

  window.log = function() {
    if (this.console) {
      console.log(Array.prototype.slice.call(arguments));
    }
  };
  jQuery.fn.log = function(msg) {
    console.log("%s: %o", msg, this);
    return this;
  };

  // $(arr).log(); //show an array of all elements with classname class




  jQuery.each(mainButtons, function(index, value) {

    $('#' + this).click(function() {
      var currentIndex = index + 1;
      
      if(currentIndex < btnStatus)  {
         for(var i = btnStatus; i > currentIndex; i--)
         {
               $("#wrapper").animate({
                  opacity: 1,
                 right: "-=" + offset,
               }, 500, function() {});
               btnStatus = btnStatus - 1
         }
        
      } else if(currentIndex > btnStatus) {
         for(var i = btnStatus; i < currentIndex; i++)
         {
               $("#wrapper").animate({
                  opacity: 1,
                 right: "+=" + offset,
               }, 500, function() {});
               btnStatus = btnStatus + 1
         }
        
      }
         
     
    });
  });


});

body {
  font-weight: normal;
  font-size: 15px;
  color: #000000;
}
header {
  height: 50px;
  background-color: #99CCFF;
}
footer {
  height: 50px;
  background-color: #99CCFF;
}
.test {
  font-size: 500px;
}
section {
  float: left;
}
.sliderContainer {
  overflow: hidden;
  width: 980px;
  height: 480px;
  background-color: gray;
}
.sliderContent {
  width: 980px;
  height: 480px;
  position: relative;
  float: left;
}
#wrapper {
  position: relative;
  width: 2940px;
}
#content01 {
  background-color: #E2E2E2;
}
#content02 {
  background-color: rgb(213, 255, 213);
}
#content03 {
  background-color: rgb(247, 247, 168);
}
/*OUTER SLIDESHOW*/

#main-slideshow {
  width: 1960px;
  height: 480px;
  position: relative;
  width: 2940px;
}
button {
  position: absolute;
  top: 210px;
}
.btnPrevious {
  left: 0px;
}
.btnNext {
  left: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main">
  <a id="tab1" href="#">Tab 1</a> |
  <a id="tab2" href="#">Tab 2</a> |
  <a id="tab3" href="#">Tab 3</a> |
  <a id="tab4" href="#">Tab 4</a>
</nav>

<div id="main-slideshow">
  <section>
    <div class="sliderContainer">


      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 01 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1> Section 01 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 01 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <section>
    <div class="sliderContainer">

      <div id="wrapper">
        <div id="content01" class="sliderContent">
          <h1>Section 02 - Content 01</h1>
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>
        <div id="content02" class="sliderContent">
          <h1>Section 02 - Content 02</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

        <div id="content03" class="sliderContent">
          <h1>Section 02 - Content 03</h1> 
          <img alt="image two" src="http://placehold.it/250/ffffff/000000" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mi varius nulla mollis lobortis. Integer commodo, odio et dapibus commodo, ipsum justo dapibus augue, et volutpat felis sem id nisi. Integer at ullamcorper nunc, vitae
            tincidunt ante. Etiam blandit magna ac est elementum mattis. Ut vel nulla nec est egestas volutpat. Donec eget efficitur risus, ut iaculis leo. Nullam iaculis facilisis mollis. Fusce non dictum urna. Curabitur tellus turpis, euismod sit amet
            condimentum eget, malesuada nec ipsum. Sed vel tempor purus. Curabitur elit nisl, aliquam nec turpis sit amet, feugiat auctor ante. Praesent rutrum orci ac elit consectetur, in iasdasdmperdiet ex semper. Ut sed pulvinar urna. Suspendisse id
            molestie risus. Sed sit amet euismod nibh.testtest</p>
        </div>

      </div>
    </div>
  </section>
  <button class="btnPrevious" type="button">&lt; &lt;</button>
  <button class="btnNext" type="button">&gt; &gt;</button>
</div>

jQuery 嵌套滑块动画

jQuery Nested Slider Animation

jquery

jquery-animate