使這個滑塊無限旋轉

Question

我想讓這個滑塊爲一個網站，我很難使這個滑塊旋轉其圖像。我想要得到的是當我點擊最後一張圖片上的下一張圖片時，它會返回到第一張圖片，並且與上一張圖片相同。代碼的作品，如果我做出的調整我做了評論。任何幫助將是非常有益的！謝謝！

< script type = "text/javascript" > 
 
    var Slider = function() { 
 
    this.initialize.apply(this, arguments) 
 
    } 
 
Slider.prototype = { 
 

 
    initialize: function(slider) { 
 
    this.ul = slider.children[0] 
 
    this.li = this.ul.children 
 

 
    // make <ul> as large as all <li>’s 
 
    this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px' 
 

 
    this.currentIndex = 0 
 
    }, 
 

 
    goTo: function(index) { 
 
    // filter invalid indices 
 
    if (index < 0 || index > this.li.length - 1) 
 
     return 
 

 
    // move <ul> left 
 
    this.ul.style.left = '-' + (100 * index) + '%' 
 

 
    this.currentIndex = index 
 
    }, 
 

 
    goToPrev: function() { 
 
    this.goTo(this.currentIndex - 1) 
 
    }, 
 

 
    goToNext: function() { 
 
    /* this is the code im trying on but it wont work 
 
     if (this.currentIndex = 0) { 
 
    \t \t this.goTo(this.currentIndex + 1) 
 
    \t }; 
 
    \t else if (this.currentIndex = 1) { 
 
    \t \t this.goTo(this.currentIndex + 1) 
 
    \t }; 
 
    \t else if (this.currentIndex = 2) { 
 
    \t \t this.goTo(this.currentIndex + 1) 
 
    \t }; 
 
    \t else*/ 
 
    this.goTo(this.currentIndex - 3) 
 
    } 
 
} 
 
var sliders = [] 
 
$('.slider').each(function() { 
 
    sliders.push(new Slider(this)) 
 
})

.slider { 
 
    width: 400px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.slider > ul { 
 
    position: relative; 
 
    left: 0; 
 
    -webkit-transition: 0.5s left; 
 
    -moz-transition: 0.5s left; 
 
    -ms-transition: 0.5s left; 
 
    -o-transition: 0.5s left; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slider > ul > li { 
 
    float: left; 
 
    width: 400px; 
 
    height: 300px; 
 
}

<div class="slide"> 
 

 
    <div class="slider"> 
 
    <ul> 
 
     <li> 
 
     <img src="img1.jpg"> 
 
     </li> 
 
     <li> 
 
     <img src="img2.jpg"> 
 
     </li> 
 
     <li> 
 
     <img src="img3.jpg"> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
    <div class="navigation"> 
 
    <a href="javascript:sliders[0].goToPrev()">Prev</a> 
 
    <a class="butnav" href="javascript:sliders[0].goTo(0)">1</a> 
 
    <a class="butnav" href="javascript:sliders[0].goTo(1)">2</a> 
 
    <a class="butnav" href="javascript:sliders[0].goTo(2)">3</a> 
 
    <a href="javascript:sliders[0].goToNext()">Next</a> 
 
    </div> 
 
</div>

Answer 1

我已經在代碼中的一些修改和它的工作對我來說。

var Slider = function() { 
 
\t \t this.initialize.apply(this, arguments); 
 
\t \t }; 
 
\t \t Slider.prototype = { 
 

 
\t \t \t initialize: function(slider) { 
 
\t \t \t \t this.ul = slider.children[0]; 
 
\t \t \t \t this.li = this.ul.children; 
 

 
\t \t \t \t // make <ul> as large as all <li>’s 
 
\t \t \t \t this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'; 
 

 
\t \t \t \t this.currentIndex = 0; 
 
\t \t \t }, 
 

 
\t \t \t goTo: function(index) { 
 
\t \t \t \t // filter invalid indices 
 
\t \t \t \t if (index < 0 || index > this.li.length - 1) 
 
\t \t \t \t return; 
 

 
\t \t \t \t // move <ul> left 
 
\t \t \t \t this.ul.style.left = '-' + (100 * index) + '%'; 
 

 
\t \t \t \t this.currentIndex = index; 
 
\t \t \t }, 
 

 
\t \t \t goToPrev: function() { 
 
\t \t \t \t if(this.currentIndex === 0){ 
 
\t \t \t \t \t this.goTo(2); 
 
\t \t \t \t }else{ 
 
\t \t \t \t \t this.goTo(this.currentIndex - 1); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t }, 
 

 
\t \t \t goToNext: function() { 
 
\t \t \t \t if(this.currentIndex === 2){ 
 
\t \t \t \t \t this.goTo(0); 
 
\t \t \t \t }else{ 
 
\t \t \t \t \t this.goTo(this.currentIndex + 1); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }; 
 
\t \t var sliders = []; 
 
\t \t $('.slider').each(function() { 
 
\t \t sliders.push(new Slider(this)); 
 
\t \t });

.slider { 
 
\t \t width: 400px; 
 
\t \t height: 300px; 
 
\t \t overflow: hidden; 
 
\t \t } 
 
\t \t .slider > ul { 
 
\t \t position: relative; 
 
\t \t left: 0; 
 
\t \t -webkit-transition: 0.5s left; 
 
\t \t -moz-transition: 0.5s left; 
 
\t \t -ms-transition: 0.5s left; 
 
\t \t -o-transition: 0.5s left; 
 
\t \t list-style: none; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t } 
 
\t \t .slider > ul > li { 
 
\t \t float: left; 
 
\t \t height: 300px; 
 
\t \t width: 400px; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="slide"> 
 
\t \t <div class="slider"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <img src="https://pbs.twimg.com/profile_images/590405794153136128/fdGjhrrv.jpg"> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <img src="https://s-media-cache-ak0.pinimg.com/originals/3c/af/cf/3cafcf31f34af16b7f833f0bd844c856.jpg"> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT-l-xbQ1bUZMCrbTvm_qbAwZOdJEWYBg3e23OrLmRl72LcWhsJfQ"> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <div class="navigation"> 
 
\t \t \t <a href="javascript:sliders[0].goToPrev()">Prev</a> 
 
\t \t \t <a class="butnav" href="javascript:sliders[0].goTo(0)">1</a> 
 
\t \t \t <a class="butnav" href="javascript:sliders[0].goTo(1)">2</a> 
 
\t \t \t <a class="butnav" href="javascript:sliders[0].goTo(2)">3</a> 
 
\t \t \t <a href="javascript:sliders[0].goToNext()">Next</a> 
 
\t \t </div> 
 
\t </div>