HTML、CSS、JSのイメージティッカー

私はイメージのティッカー（スクロールバー）を作る方法を探していました。今私が達成しようとしていることは（知識がほとんどない）現在のHTML/CSSコードでは実現できないようです。ライブプレビュー：HTML、CSS、JSのイメージティッカー

HTML：：

<div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-biermans2x.png" alt="Biermans" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-powertools2x.png" alt="Powertools" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-hopibon2x.png" alt="HopiBon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-harkema2x.png" alt="Harkema" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-intersport2x.png" alt="Intersport" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-berkman2x.png" alt="Berkman" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_oranje-dozon2x.png" alt="Dozon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-buijtendijk2x.png" alt="Buijtendijk" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-miele2x.png" alt="Miele" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-daka2x.png" alt="Daka" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_bruin-stg2x.png" alt="STG" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-sterrenburg2x.png" alt="Sterrenburg" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-assem2x.png" alt="Assem" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-hkv2x.png" alt="HKV" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/11/app_icon_blauw-scool4you2x.png" alt="Scool4You" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_groen-zwager2x.png" alt="Zwager" height="70" width="70"></div> 

    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-biermans2x.png" alt="Biermans" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-powertools2x.png" alt="Powertools" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-hopibon2x.png" alt="HopiBon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-harkema2x.png" alt="Harkema" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-intersport2x.png" alt="Intersport" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-berkman2x.png" alt="Berkman" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_oranje-dozon2x.png" alt="Dozon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-buijtendijk2x.png" alt="Buijtendijk" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-miele2x.png" alt="Miele" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-daka2x.png" alt="Daka" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_bruin-stg2x.png" alt="STG" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-sterrenburg2x.png" alt="Sterrenburg" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-assem2x.png" alt="Assem" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-hkv2x.png" alt="HKV" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/11/app_icon_blauw-scool4you2x.png" alt="Scool4You" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_groen-zwager2x.png" alt="Zwager" height="70" width="70"></div> 

    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-biermans2x.png" alt="Biermans" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-powertools2x.png" alt="Powertools" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-hopibon2x.png" alt="HopiBon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-harkema2x.png" alt="Harkema" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-intersport2x.png" alt="Intersport" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_wit-berkman2x.png" alt="Berkman" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_oranje-dozon2x.png" alt="Dozon" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-buijtendijk2x.png" alt="Buijtendijk" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-miele2x.png" alt="Miele" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_rood-daka2x.png" alt="Daka" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_bruin-stg2x.png" alt="STG" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-sterrenburg2x.png" alt="Sterrenburg" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-assem2x.png" alt="Assem" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_blauw-hkv2x.png" alt="HKV" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/11/app_icon_blauw-scool4you2x.png" alt="Scool4You" height="70" width="70"></div> 
    <div class="ticker__item"><img src="http://bvivaloyalty.com/wp-content/uploads/2017/10/app_icon_groen-zwager2x.png" alt="Zwager" height="70" width="70"></div> 
    </div> 
</div> 
</div>

ここ https://codepen.io/anon/pen/WZJeer コードです0

CSS：

.ticker-wrap { 
    position: relative; 
} 

.ticker-wrap:before { 
    content: ""; 
    width: 200px; 
    height: 100%; 
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
    position: absolute; 
    z-index: 9; 
    left: 0; 
    top: 0; 
} 

.ticker-wrap:after { 
    content: ""; 
    width: 200px; 
    height: 100%; 
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
    position: absolute; 
    z-index: 9; 
    right: 0; 
    top: 0; 
} 

@-webkit-keyframes ticker { 
    0% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    visibility: visible; 
    } 

    100% { 
    -webkit-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
    } 
} 

@keyframes ticker { 
    0% { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    visibility: visible; 
    } 

    100% { 
    -webkit-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
    } 
} 

.ticker-wrap { 
    width: 100%; 
    overflow: hidden; 
    height: 70px; 
    background-color: rgba(#fff, 0.0); 
    padding-left: 0%; // offset items to begin 

} 

.ticker { 

    display: inline-block; 
    height: 100px; 
    line-height: 5rem; 
    white-space: nowrap; // display items in a line 
    padding-right: 100%; // ensure items go before animations repeat (taken from parent due to inline-block) 

    -webkit-animation-iteration-count: infinite; 
      animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
      animation-timing-function: linear; 
-webkit-animation-name: ticker; 
     animation-name: ticker; 
    -webkit-animation-duration: 150s; 
      animation-duration: 150s; 

} 

    .ticker__item { 

    display: inline-block; 

    padding: 0 30px; 
    font-size: 2rem; 
    color: white; 

    }

私の目標は、ページ全体でスムーズに実行され、視覚的に更新されませんロゴののティッカーです。そして私が聞いたことから、これはいくつかのJSを追加することによってのみ達成することができます。

私はJSについて知らないので、私が思いついた解決策は、HTMLコードを数回複製することで、訪問者がリフレッシュを見ることはほとんどありません...しかし、私はより良いものを探しています方法。これは私のカスタムCSSとJSの両方を追加する能力があるので、私のワードプレスのウェブサイト上で動作するはずです。

出典

2017-12-12 Daniel Blom

のみjavascriptまたはjquery？ – Leo

どちらが本当に必要ですか。 –

HTML：

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:100px;overflow:hidden;visibility:hidden;"> 
     <!-- Loading Screen --> 
     <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> 
      <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" /> 
     </div> 
     <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:100px;overflow:hidden;"> 
      <div data-p="30.00"> 
       <img data-u="image" src="https://www.google.it/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj7pPe3pofYAhUJJ-wKHXknCvoQjRwIBw&url=https%3A%2F%2Fwww.profilatriciarta.it%2F&psig=AOvVaw31BVXxhwB1aQA_eESjma5N&ust=1513264924000805" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div> 
         <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div>   <div data-p="30.00"> 
       <img data-u="image" src="https://www.index-education.com/contenu/img/commun/logo-pronote-menu.png" /> 
      </div> 
     </div> 
    </div>

のjQuery：

jQuery(document).ready(function ($) { 

    var jssor_1_options = { 
     $AutoPlay: 1, 
     $Idle: 0, 
     $SlideDuration: 5000, 
     $SlideEasing: $Jease$.$Linear, 
     $PauseOnHover: 4, 
     $SlideWidth: 140, 
     $Cols: 7, 
     $Align: 0 
    }; 

    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

    /*#region responsive code begin*/ 

    var MAX_WIDTH = 980; 

    function ScaleSlider() { 
     var containerElement = jssor_1_slider.$Elmt.parentNode; 
     var containerWidth = containerElement.clientWidth; 

     if (containerWidth) { 

      var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); 

      jssor_1_slider.$ScaleWidth(expectedWidth); 
     } 
     else { 
      window.setTimeout(ScaleSlider, 30); 
     } 
    } 

    ScaleSlider(); 

    $(window).bind("load", ScaleSlider); 
    $(window).bind("resize", ScaleSlider); 
    $(window).bind("orientationchange", ScaleSlider); 
    /*#endregion responsive code end*/ 
});

デモ：デモのjsfiddle

sourse：source_demo

ソースgithub

出典

2017-12-13 15:30:58 Leo

HTML、CSS、JSのイメージティッカー

答えて

関連する問題