需要关于使用JQuery的滑块的帮助

Question

我的滑块出现问题 https://jsfiddle.net/8fcoLkgs/2/

有人可以向我解释这段代码吗？因为我被困在操纵滑块

$('.client-content').parent('li').parent('ul.client-slider').animate({
      "margin-left": (-(intIndex) * theWidth)
}, 1000)

Answer 1

您可以使用此代码.. 阅读代码中的注释

//$(theContent).each(function(intIndex){ // no need to loop
    var Num_of_Divs = $('.client-content').length; // Number of divs
    var i = 1; // set i (index) to 1 to show the index(1) div (div number 2)
    $('.control-direct button').on('click',function(){
        if($(this).is('.next')) {
           i = (i >= Num_of_Divs)? 0 : i; // if index >= Number of Divs set i = 0 (the first div)  if not i = i 
           $('.client-content').closest('ul.client-slider').animate({  // not need to use parent().parent()  you can use closest();
               "margin-left": (-(i) * theWidth)
           }, 1000);
           i++;
        } else if($(this).is('.prev')) {
           i--;
           i = (i < 1)? Num_of_Divs : i; // if index < 1 set i = Number of Divs  if not i = i 
           $('.client-content').closest('ul.client-slider').animate({
               "margin-left": (-(i - 1) * theWidth)
           }, 1000);  
        }
    });
//});

Jsfiddle

＆＃13;

＆＃13;

var theContent = $('ul.client-slider li .client-content');
var theWidth = theContent.width();

$('ul.client-slider').wrap('<div id="mother" />');
$('#mother').css({
  width: theWidth,
  height: theContent.height(),
  position: 'relative',
  overflow: 'hidden'
});

var totalWidth = theContent.length * theWidth;
console.log(totalWidth);
$('ul.client-slider').css({
  width: totalWidth
});

//$(theContent).each(function(intIndex){ // no need to loop
var Num_of_Divs = $('.client-content').length; // Number of divs
var i = 1; // set i (index) to 1 to show the index(1) div (div number 2)
$('.control-direct button').on('click',function(){
  if($(this).is('.next')) {
    i = (i >= Num_of_Divs)? 0 : i; // if index >= Number of Divs set i = 0 (the first div)  if not i = i 
    $('.client-content').closest('ul.client-slider').animate({  // not need to use parent().parent()  you can use closest();
      "margin-left": (-(i) * theWidth)
    }, 1000);
    i++;
  } else if($(this).is('.prev')) {
    i--;
    i = (i < 1)? Num_of_Divs : i; // if index < 1 set i = Number of Divs  if not i = i 
    $('.client-content').closest('ul.client-slider').animate({
      "margin-left": (-(i - 1) * theWidth)
    }, 1000);  
  }
});
//});

＆＃13;

body {
  background: #fbd773;
}

ul.client-slider li {
  list-style: none;
  float: left;
  position: relative;
  width: 500px;
}

ul.client-slider li .client-content{
  width: 500px;
  overflow: hidden;
}

.control-direct {
  /*position: absolute;*/
  bottom: 250px;
  right: 71px;
}

.control-direct button {
  border: none;
  cursor: pointer;
}

.control-direct button.prev {
  background: transparent url('http://i.imgur.com/c5e1eTx.png') no-repeat 0 0;
  width: 19px;
  height: 28px;
  margin-right: 5px;
}

.control-direct button.next {
  background: transparent url('http://i.imgur.com/c5e1eTx.png') no-repeat -25px 0;
  width: 19px;
  height: 28px;
}

.client-photo {
  border-radius: 50%;
  background-color: #ffffff;
  width: 120px;
  height: 120px;
  border: 2px solid #dfbe66;
  padding: 8px;
  float: left;
}

.client-photo img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.client-slider blockquote {
  float: left;
  padding: 0;
  margin: 22px 0 0 20px;
  width: 60%;
  border: none;
  quotes: "\201C""\201D""\2018""\2019";
  color: #464251;
  font-size: 14px;
}

.client-slider blockquote:before {
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
  color: #464251;
}

.client-slider blockquote:after {
  content: close-quote;
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
  color: #464251;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-direct">
  <button class="prev" data-nav="prev"></button>
  <button class="next" data-nav="next"></button>
</div>
<ul class="client-slider">
  <li>
    <div class="client-content">
      <div class="client-photo">
        <img src="http://i.imgur.com/sZWJMjG.jpg" />
      </div>
      <blockquote>Dolor sit amet, consnt dolore magna aliquam erat voaliquamer qui dolorem adipisci velit.</blockquote>
    </div>
  </li>
  <li>
    <div class="client-content">
      <div class="client-photo">
        <img src="http://i.imgur.com/EchoZkt.jpg" />
      </div>
      <blockquote>Lorem ipsum dolor sit amet, consnt dolore magna aliquam erat voaliquamer qui dolorem adipisci velit.</blockquote>
    </div>
  </li>
  <li>
    <div class="client-content">
      <div class="client-photo">
        <img src="http://i.imgur.com/0ux9uRR.jpg" />
      </div>
      <blockquote>Ipsum dolor sit amet, consnt dolore magna aliquam erat voaliquamer qui dolorem adipisci velit.</blockquote>
    </div>
  </li>
  <li>
    <div class="client-content">
      <div class="client-photo">
        <img src="http://i.imgur.com/iML7LG4.jpg" />
      </div>
      <blockquote>Ipsum dolor sit amet, consnt dolore magna aliquam erat voaliquamer qui dolorem adipisci velit.</blockquote>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;