HTML-CSS-JS我怎样才能把它变成一个'文字轮播'？

我正试图在没有任何帮助的情况下重新创建“文本轮播”。我目前制作了this（伸出手，它还没有响应）。这是我试图recreate向下滚动到感言部分。我已经检查过他们的网站，但是他们已经使用Bootstrap来做到这一点，我试图在没有的情况下重新创建它，只能使用html，css和javascript。HTML-CSS-JS我怎样才能把它变成一个'文字轮播'？

我已经检查了文本传送带的codepen，但它们大多只有一个文本字段，我希望至少有两个。

感谢您的帮助。

PS：.fa-angle-left和.fa-angle-right都来自FontAwesome，但我很快用google的图片取代了它们。

来源

2017-05-23 Panic

*«我试图重新建立一个 '文本旋转木马'»* ..那么你的代码在哪里？你的小提琴中没有JS。 –

@LouysPatriceBessette是的，我一直在寻找该部分的帮助主要是 – Panic

我不能看到你提到的网站上的任何传送带。 –

正如我所看到的，你正试图学会自己做，而且太棒了！保持良好的工作！

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

首先，添加更多.tekstbalonvolledig divs，以便测试它。

二CSS的一部分：

1 - 围绕.tekstbalonvolledig的div添加.wrapper DIV与1000像素宽度

2 - 添加overflow: hidden到.overlaycontainer

现在JS部分：

1 - 在.wrapper上创建一个为-500px的页边空白动画效果的函数

2 - 添加点击事件li斯特纳你.fa角度左运行此功能

当然还有很多更多的事情来实现你的旋转木马，但我希望这会帮助你开始:)

来源

2017-05-23 17:04:55

下面是代码对于旋转木马..

下面是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库文件

来源

2017-05-23 17:35:03 Pradeep

HTML-CSS-JS我怎样才能把它变成一个'文字轮播'？

回答

相关问题