Swiper中文论坛

标题: 如何实现广告动态栏文字,隔2秒向上滚动的效果 [打印本页]

作者: comxgb    时间: 2017-4-12 17:24
标题: 如何实现广告动态栏文字,隔2秒向上滚动的效果
本帖最后由 comxgb 于 2017-4-12 17:57 编辑

如何实现广告动态栏文字,隔2秒向上滚动的效果

高度只有30,宽度100%

纯文本

我弄了半天还没弄好

没人帮忙吗?

我自己写了些代码,但是不正常,一开始就显示2222,然后一直循环显示22222,33333,44444,444444,然后又22222,33333,44444,444444

按理应该是,1111,2222,3333,4444的轮播顺序
代码如下

  1.    <style>
  2.                                 .opop {
  3.                                         height: 30px;
  4.                                         background-color: #CCCCCC;
  5.                                         padding: 0px;
  6.                                         margin: 0px;
  7.                                         width:100%;
  8.                                 }
  9.                         </style>
  10.                         <div class="opop swiper-container">
  11.                                 <div class="swiper-wrapper opop" id="swiper">
  12.                                         <div class="swiper-slide opop">111111111</div>
  13.                                 </div>
  14.                                 <div class="swiper-wrapper opop" id="swiper">
  15.                                         <div class="swiper-slide opop" >22222222222</div>
  16.                                 </div>
  17.                                 <div class="swiper-wrapper opop" id="swiper">
  18.                                         <div class="swiper-slide opop" >333333333</div>
  19.                                 </div>
  20.                                 <div class="swiper-wrapper opop" id="swiper">
  21.                                         <div class="swiper-slide opop" >4444444444</div>
  22.                                 </div>
  23.                         </div>
  24.                         <script type="text/javascript" src="../script/swiper-3.4.2.min.js"></script>
  25.             <script>
  26.                         var mySwiper3 = new Swiper('.opop', {
  27.                                 loop : true,
  28.                                 direction: 'vertical',
  29.                                 autoplay : 3000,
  30.                         })
  31.            </script>
复制代码



作者: admin    时间: 2017-4-15 19:51
仔细调试




欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2