堆棧內存溢出
  簡體   English   中英

HTML，CSS和JS中的圖像行情顯示

[英]Image ticker in HTML, CSS and JS

 原文  2017-12-12 13:18:54  6   1    javascript/ html/ css

問題描述

我一直在尋找制作圖像行進器（滾動條）的方法。 現在，我擁有的最新HTML / CSS代碼似乎無法（幾乎不了解）完成什么。 實時預覽： https : //codepen.io/anon/pen/WZJeer這是代碼：

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>

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代碼重復幾次，因此訪問者不太可能看到刷新...但是我正在尋找更好的方法。 這應該可以在我的WordPress網站上使用，因為我可以添加自定義CSS和JS。

1 個解決方案

解決方案1
 0  2017-12-13 15:30:58

的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

演示的源代碼： source_demo

源github

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶有JS和CSS的HTML圖片庫 帶有 HTML、CSS 和 JS 的模態圖像 如何為 AMP-HTML 創建 css 新聞代碼？ 去除圖像中的顏色-CSS，HTML，JS？ 在圖像的一部分中反轉顏色 - HTML，CSS，JS 在 Html/CSS/JS 中將文本格式化到圖像的右側 文本不顯示在圖像 CSS HTML JS 上 使用 HTML、CSS 和 JS 自動加載圖像模式 Js 中的背景圖像幻燈片（&amp; HTML，CSS） 使用 html5/CSS/JS 的圖像亮度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM