我正在尝试根据从here
下载的代码创建文本滑块单击相应的圆圈时，它将滑动到相应的文本幻灯片。
我想最初自动向左移动滑块。
如何自动启动滑块？我尝试使用SetInterval（）函数，它可以工作一次，然后当我点击圈子control-button
这是我的代码
//= 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>
答案 0 :(得分：1)
问题是setInterval方法中调用的rotate方法不会更改要滚动到的项目。根据需要每5秒调用一次setInterval。
尝试这样的事情：
habitsByDay答案 1 :(得分：1)
这是一个实时演示，演示了如何使用next_item变量来跟踪下一张要旋转的幻灯片。当它到达最后一张幻灯片时，它会自动重置为第一张幻灯片。我相信这是你正在寻找的行为。
现场工作演示：
//= 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>