Question

我正在尝试重新创建一个＆＃39;文字轮播＆＃39;没有任何帮助。我目前正在制作this（伸展它，它尚未响应）。以下是我尝试recreate向下滚动到推荐部分的内容。我已经检查了他们的网站，但他们已经使用Bootstrap完成了这项工作，我试图重新创建它，而不是只使用html，css和javascript。

我已经检查了文本轮播的codepen，但它们大多只有一个文本字段，我想要至少有两个。

感谢您帮助我。

PS：.fa-angle-left和.fa-angle-right来自FontAwesome，但我很快用谷歌的图片替换了它们。

Answer 1

正如我所看到的，你正在努力学习如何自己做，这太棒了！保持良好的工作！

有多种方法可以实现此行为。我不会为你编写代码，但这里有一些步骤供你学习：

首先，添加更多.tekstbalonvolledig div，以便进行测试。

CSS部分：

1 - 在1000px宽度的.tekstbalonvolledig div周围添加.wrapper div

2 - 将overflow: hidden添加到.overlaycontainer

现在JS部分：

1 - 创建一个函数，在.wrapper上为-500px左边的边距设置动画

2 - 向您添加一个单击事件监听器.fa-angle-left以运行此功能

当然，您的旋转木马上还有很多东西需要实施，但我希望这可以帮助您开始：）

Answer 2

以下是轮播的代码..

以下是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

不要忘记包含bootstrap和jquery库文件

HTML-CSS-JS如何将其转换为文本轮播＆＃39;？

2 个答案: