我试图将 p 标签的多个 div 从右向左滑动(反之亦然)，但不是从右向左滑动它们，而是一个接一个地显示。我如何只显示一个然后从左侧(或右侧)滑动下一个等等？ 谢谢!
HTML:
<div id="slider">
<div class="slide1">
<p>Lorem ipsum dolor sit amet</p><br />
<ul class="actions">
<li><a href="#" class="button special big">Get
Details</a></li>
</ul>
</div>
<div class="slide2">
<p>Epes di ameb latota ed atem</p><br />
<ul class="actions">
<li><a href="#" class="button special big">More Info</a>
</li>
</ul>
</div>
</div>
Javascript:
setInterval(function () {
$('#slider').animate({right: "2000px"}, "slow", function () {
$('#slider img:first-child').appendTo('#slider');
$('#slider').css('right', '0');
});
}, 4000);
CSS:
#slider {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 500px;
height: 180px;
}
最佳答案
这是一个使用 Bootstrap 的轮播示例。将 data-interval 值从 4000 更改为您希望图像过渡的任何时间间隔(以毫秒为单位)。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="4000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://www.hdwall.xyz/wp-content/uploads/2018/04/hdwall.xyz-Pink-Lowpoly-Abstract-Samsung-Galaxy-S9-Stock931866586-1280x720.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.vimeocdn.com/video/350636663_1280x720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://wallpapersite.com/images/pages/pic_w/8931.jpg" alt="Third slide">
</div>
</div>
</div>
</body>
</html>更多信息和引导文档在这里:https://getbootstrap.com/docs/4.0/components/carousel/
关于javascript - 从左到右滑动多个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51012916/