jquery中的Setinterval()函数不能正常工作
Setinterval() function in jquery not working properly
我正在尝试制作一个基于从这里下载的代码的文本滑块
当点击相应的圆圈时,它将滑动到相应的文本幻灯片。
我想首先自动向左移动滑块。如何自动启动滑块?我尝试使用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>
下面是一个实时演示,演示如何使用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>
问题是setInterval方法中调用的rotate方法并没有改变要滚动到的项目。setInterval每5秒被调用一次
试试这样写:
var currentItem = 0;
function rotate() {
container.stop()
.animate({
'left': item_width * -1 * currentItem
}, 1500);
currentItem++;
if (currentItem >= 5) {
currentItem = 0;
}
}
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作