jQuery中的setinterval（）函数无法正常工作

Question

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

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> 

Answer 1

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.

Try something like this:

var currentItem = 0;

function rotate() {

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

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

Answer 2

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.

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>