jquery中的Setinterval（）函数无法正常工作

I'm trying to make a text slider based on the code downloaded from here

我正在尝试根据从这里下载的代码制作文本滑块

When clicked on the corresponding circle , it will slide to the respective text slide.

单击相应的圆圈时,它将滑动到相应的文本幻灯片。

I want to move the slider left automatically initially. How can i start the slider automatically? I tried using the SetInterval() function and it works for one time, then also when i click the circles control-button

我想最初自动向左移动滑块。如何自动启动滑块?我尝试使用SetInterval()函数,它可以工作一次,然后我点击圆圈控制按钮

Here is my code

这是我的代码

//= require_tree .
$(document).ready(function () {
    //rotation speed and timer
    var speed = 5000;
    
    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));

    
    function rotate() {
     container.stop().animate({
                'left': item_width * -2
            }, 1500);
    }
   
    
     /*function rotate() {
     $('.pseudo-control').click();
    }


    $('.pseudo-control').click(function (e) {
     	
            container.stop().animate({
                'left': item_width * -2
            }, 1500);
        
    });*/
     $('.control-button').click(function (e) {
        //slide the item
        
        if (container.is(':animated')) {
            return false;
        }
        
        if(e.target.id=="slide1")
        {
        	
        	container.stop().animate({
                'left': 0
            }, 1500);
        }
        else if(e.target.id=="slide2")
        {
        	
        	container.stop().animate({
                'left': item_width * -1
            }, 1500);
        }
        else if(e.target.id=="slide3")
        {
        	
        	container.stop().animate({
                'left': item_width * -2
            }, 1500);
        }
        else if(e.target.id=="slide4")
        {
        	
        	container.stop().animate({
                'left': item_width * -3
            }, 1500);
        }
        else if(e.target.id=="slide5")
        {
        	
        	container.stop().animate({
                'left': item_width * -4
            }, 1500);
        }
        /*if (1==1) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }*/
        
        //cancel the link behavior    

        return false;
        
    });
   
    
    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });
    
  
    
    
});

* customer-slider */

#carousel {
  position: relative;
  width: 100%;
  
   background: #E9F2F5;
   color: #444;
}

#slides {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 130px;

}

#slides ul {
  list-style: none;
  width: 100%;
  height: 130px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slides li {
  width: 100%;
  height: 130px;
  float: left;
  text-align: center;
  position: relative;
  font-family: lato, sans-serif;
}

/* Styling for prev and next buttons */

.btn-bar {
  width: 60%;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 40px;
}

#buttons {
  padding: 0 0 5px 0;
  float: right;
}

#buttons a {
  text-align: center;
  display: block;
  font-size: 50px;
  float: left;
  outline: 0;
  margin: 0 60px;
  color: #b14943;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}

a#prev:hover,
a#next:hover {
  color: #FFF;
  text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
  font-family: sans-serif;
  font-weight: 300;
  display: table-cell;
  vertical-align: middle;
  padding: 5px 20px;
  font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
  height: 130px;
  font-size: 15px;
  color: #ccc;
  font-style: italic;
  padding: 1px 20%;
  
}

.quote-marks {
  font-size: 30px;
  padding: 0 3px 3px;
  position: inherit;
}



.quoteContainer {
  display: table;
  width: 100%;
}
.carousel-control
{
  width: 150px;
  margin:auto;
}
.carousel-control ul
{
  
  display: inline-block;
}

.carousel-control ul li 
{
  list-style-type: none;
  display: inline-block;
  height: 10px;width:10px;border-radius: 10px;background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="carousel">
  
  <div id="slides">
    <ul>
      <li class="slide" id="slide1">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span> I was literally BLOWN AWAY by Company A's work! They went above and beyond all of our expectations with design, usability. and branding, I will reccommend them to everyone I know!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide2">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span> I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail! <span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide3">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Carl Fakeguy, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide4">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Sooraj1, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide5">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Sooraj2, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
    </ul>
  </div>
  <!--<div class="btn-bar">
    <div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div>
  </div>-->
</div>
		<div class="customer-pic">
		</div>
    <div class="carousel-control">
      <div class="pseudo-control">
      </div>
      <ul>
        <li class="control-button" id="slide1"></li>
        <li class="control-button" id="slide2"></li>
        <li class="control-button" id="slide3"></li>
        <li class="control-button" id="slide4"></li>
        <li class="control-button" id="slide5"></li>
      </ul>
    </div>
	
</div>

2 个解决方案

#1

Here is a live demo that demonstrates how you can use a next_item variable to keep track of the next slide to rotate to. When it gets to the last slide, it resets to the first slide automatically. I believe this is the behavior you are looking for.

这是一个现场演示,演示了如何使用next_item变量来跟踪要旋转的下一张幻灯片。当它到达最后一张幻灯片时,它会自动重置为第一张幻灯片。我相信这是你正在寻找的行为。

Live Working Demo:

现场工作演示:

//= require_tree .
$(document).ready(function () {
    //rotation speed and timer
    var speed = 3000;
    
    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));
  
    var next_item = 1;
    
    function rotate() {
        container.stop().animate({
            'left': -item_width * next_item
        }, 1500);
        next_item++;
        if (next_item >= slides.length) next_item = 0;
    }
   
    
     /*function rotate() {
     $('.pseudo-control').click();
    }


    $('.pseudo-control').click(function (e) {
     	
            container.stop().animate({
                'left': item_width * -2
            }, 1500);
        
    });*/
     $('.control-button').click(function (e) {
        //slide the item
        
        if (container.is(':animated')) {
            return false;
        }
        
        if(e.target.id=="slide1")
        {
        	
        	container.stop().animate({
                'left': 0
            }, 1500);
        }
        else if(e.target.id=="slide2")
        {
        	
        	container.stop().animate({
                'left': item_width * -1
            }, 1500);
        }
        else if(e.target.id=="slide3")
        {
        	
        	container.stop().animate({
                'left': item_width * -2
            }, 1500);
        }
        else if(e.target.id=="slide4")
        {
        	
        	container.stop().animate({
                'left': item_width * -3
            }, 1500);
        }
        else if(e.target.id=="slide5")
        {
        	
        	container.stop().animate({
                'left': item_width * -4
            }, 1500);
        }
        /*if (1==1) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }*/
        
        //cancel the link behavior    

        return false;
        
    });
   
    
    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });
    
  
    
    
});

* customer-slider */

#carousel {
  position: relative;
  width: 100%;
  
   background: #E9F2F5;
   color: #444;
}

#slides {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 130px;

}

#slides ul {
  list-style: none;
  width: 100%;
  height: 130px;
  margin: 0;
  padding: 0;
  position: relative;
}

#slides li {
  width: 100%;
  height: 130px;
  float: left;
  text-align: center;
  position: relative;
  font-family: lato, sans-serif;
}

/* Styling for prev and next buttons */

.btn-bar {
  width: 60%;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 40px;
}

#buttons {
  padding: 0 0 5px 0;
  float: right;
}

#buttons a {
  text-align: center;
  display: block;
  font-size: 50px;
  float: left;
  outline: 0;
  margin: 0 60px;
  color: #b14943;
  text-decoration: none;
  display: block;
  padding: 9px;
  width: 35px;
}

a#prev:hover,
a#next:hover {
  color: #FFF;
  text-shadow: .5px 0px #b14943;
}

.quote-phrase,
.quote-author {
  font-family: sans-serif;
  font-weight: 300;
  display: table-cell;
  vertical-align: middle;
  padding: 5px 20px;
  font-family: 'Lato', Calibri, Arial, sans-serif;
}

.quote-phrase {
  height: 130px;
  font-size: 15px;
  color: #ccc;
  font-style: italic;
  padding: 1px 20%;
  
}

.quote-marks {
  font-size: 30px;
  padding: 0 3px 3px;
  position: inherit;
}



.quoteContainer {
  display: table;
  width: 100%;
}
.carousel-control
{
  width: 150px;
  margin:auto;
}
.carousel-control ul
{
  
  display: inline-block;
}

.carousel-control ul li 
{
  list-style-type: none;
  display: inline-block;
  height: 10px;width:10px;border-radius: 10px;background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="carousel">
  
  <div id="slides">
    <ul>
      <li class="slide" id="slide1">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span> I was literally BLOWN AWAY by Company A's work! They went above and beyond all of our expectations with design, usability. and branding, I will reccommend them to everyone I know!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide2">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span> I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail! <span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide3">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Carl Fakeguy, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide4">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Sooraj1, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
      <li class="slide" id="slide5">
        <div class="quoteContainer">
          <p class="quote-phrase"><span class="quote-marks">"</span>Sooraj2, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p>
        </div>
        
      </li>
    </ul>
  </div>
  <!--<div class="btn-bar">
    <div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div>
  </div>-->
</div>
		<div class="customer-pic">
		</div>
    <div class="carousel-control">
      <div class="pseudo-control">
      </div>
      <ul>
        <li class="control-button" id="slide1"></li>
        <li class="control-button" id="slide2"></li>
        <li class="control-button" id="slide3"></li>
        <li class="control-button" id="slide4"></li>
        <li class="control-button" id="slide5"></li>
      </ul>
    </div>
	
</div>

#2

The problem is that the rotate method called in the setInterval method is not changing the item to scroll to. setInterval is being called every 5 seconds as desired.

问题是setInterval方法中调用的rotate方法不会更改要滚动到的项目。根据需要每5秒调用一次setInterval。

Try something like this:

尝试这样的事情:

var currentItem = 0;

function rotate() {

    container.stop()
        .animate({
        'left': item_width * -1 * currentItem
    }, 1500);

    currentItem++;
    if (currentItem >= 5) {
       currentItem = 0;
    }
}