我的代码有问题。我正在尝试为滑块创建一个无限循环,并在悬停时暂时停止。我必须要如何得到这个。
function SlideLeft() {
marginleft = $(".slideinner-style").css("left");
marginleft = marginleft.replace("px");
currentindex = $("#currentindex").val();
if (currentindex == 1)
return;
$(".sliderightinner-style").show();
if (parseInt(currentindex) - 1 == 1)
$(".slideleftinner-style").hide();
$("#currentindex").val(parseInt(currentindex) - 1);
holderwidth = $(".slideinnerholder-style").css("width");
holderwidth = holderwidth.replace("px");
$(".slideinner-style").animate({
"left": (parseInt(marginleft) + parseInt(holderwidth)) + "px"
}, "slow");
}
function SlideRight() {
marginleft = $(".slideinner-style").css("left");
marginleft = marginleft.replace("px");
holderwidth = $(".slideinnerholder-style").css("width");
holderwidth = holderwidth.replace("px");
currentindex = $("#currentindex").val();
blockcount = $("#blockcount").val();
if (currentindex == blockcount)
return;
$(".slideleftinner-style").show();
if (parseInt(currentindex) + 1 == blockcount)
$(".sliderightinner-style").hide();
$("#currentindex").val(parseInt(currentindex) + 1);
$(".slideinner-style").animate({
"left": (parseInt(marginleft) - parseInt(holderwidth)) + "px"
}, "slow");
}
function autoplay() {
interval = setInterval(function() {
SlideRight();
}, 3000);
}
autoplay();
我使用此代码循环滑动滑块
$('.slideinner-style').delay(3500).fadeOut(500, SlideRight);
但是它没有按预期工作。有什么建议吗?
答案 0 :(得分:0)
$(function () {
$('#myCarousel').carousel({
interval: 2000,
cycle: true,
pause: "null"
});
});
$('#myCarousel').hover(function() {
$(this).carousel('pause');
}, function() {
$(this).carousel('cycle');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="https://picsum.photos/1500/600/?image=1"/>
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="https://picsum.photos/1500/600/?image=2"/>
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="https://picsum.photos/1500/600/?image=3" />
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
希望这对您有所帮助。