需要幫助的滑塊使用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

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

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

<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>