HTML-CSS-JS如何将其转换为“文本轮播”？
[英]HTML-CSS-JS How can I turn this into a 'text carousel'?
2 个解决方案
解决方案1
0 2017-05-23 17:04:55
正如我所看到的，您正在尝试自己学习，这真棒！ 保持良好的工作！
有多种方法可以实现此行为。 我不会为您编写代码，但是以下是一些您可以尝试和学习的步骤：
首先，添加更多.tekstbalonvolledig div，以便对其进行测试。
其次是CSS部分：
1-在宽度为1000px的.tekstbalonvolledig div周围添加.wrapper div
2-添加overflow: hidden到.overlaycontainer
现在，JS部分：
1-创建一个在.wrapper上为-500px的左边距动画的函数
2-向您添加click事件监听器.fa-angle-left以运行此功能
当然，您的轮播上还有很多事情要实现，但是我希望这会帮助您开始:)
解决方案2
0 2017-05-23 17:35:03
以下是轮播的代码。
以下是HTML代码
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<section id="carousel">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
<li data-target="#fade-quote-carousel" data-slide-to="3"></li>
<li data-target="#fade-quote-carousel" data-slide-to="4"></li>
<li data-target="#fade-quote-carousel" data-slide-to="5"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="active item">
<div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
<div class="item">
<div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
下面是css
section {
padding-top: 100px;
padding-bottom: 100px;
}
.quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
}
#fade-quote-carousel.carousel {
padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}
以下是小提琴链接 https://bootsnipp.com/snippets/featured/testimonial-carousel
不要忘记包括引导程序和jQuery库文件
如果搜索栏过滤器没有结果，则显示“无结果”（HTML-CSS-JS）
[英]Show "no results" if searchbar filter has no results (HTML-CSS-JS)
如何获取段落文本，然后将其转换为HTML中的整数
[英]How can i get the text of a paragraph and then turn it into an integer in HTML
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.