使此滑块无限旋转

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) {
    		this.goTo(this.currentIndex + 1)
    	};
    	else if (this.currentIndex = 1) {
    		this.goTo(this.currentIndex + 1)
    	};
    	else if (this.currentIndex = 2) {
    		this.goTo(this.currentIndex + 1)
    	};
    	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() {
		  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() {
				if(this.currentIndex === 0){
					this.goTo(2);
				}else{
					this.goTo(this.currentIndex - 1);
				}
				
			},

			goToNext: function() {
				if(this.currentIndex === 2){
					this.goTo(0);
				}else{
					this.goTo(this.currentIndex + 1);
				}
			}
		};
		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;
		  height: 300px;
		  width: 400px;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slide">
		<div class="slider">
			<ul>
				<li>
					<img src="https://pbs.twimg.com/profile_images/590405794153136128/fdGjhrrv.jpg">
				</li>
				<li>
					<img src="https://s-media-cache-ak0.pinimg.com/originals/3c/af/cf/3cafcf31f34af16b7f833f0bd844c856.jpg">
				</li>
				<li>
					<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT-l-xbQ1bUZMCrbTvm_qbAwZOdJEWYBg3e23OrLmRl72LcWhsJfQ">
				</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>