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我怎樣才能把它變成一個'文字輪播'？

回答

相關問題