高级搜索 网站地图 TAG标签 RSS订阅 设为首页 加入收藏

DedeCMS V5.7.118 幻灯不能循环(播到最后一张停止)

彻底替换成 HTML5 轮播(根治,永久解决)

直接删掉整个 首页模板 <div class="flashnews">...</div> 全部 Flash 代码,替换成 HTML5 轮播,不受 Flash 限制,可以稳定循环。

给你一套适配你页面尺寸 宽280px,高192px、兼容织梦 arclist 标签的成品代码:

<div class="flashnews">
<style>
.slide-wrap{width:280px;height:192px;overflow:hidden;position:relative;}
.slide-wrap ul{width:9999px;height:100%;position:absolute;left:0;top:0;margin:0;padding:0;}
.slide-wrap li{float:left;width:280px;height:192px;list-style:none;}
.slide-wrap li a{display:block;width:100%;height:100%;}
.slide-wrap li img{width:100%;height:100%;object-fit:cover;border:none;}
.slide-title{position:absolute;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.5);color:#fff;padding:4px 8px;font-size:12px}
</style>
<div class="slide-wrap">
  <ul id="picSlide">
    {dede:arclist flag='f' row='5'}
    <li>
      <a href="[field:arcurl/]" target="_blank">
        <img src="[field:litpic/]" alt="[field:title/]">
        <div class="slide-title">[field:title function='html2text(@me)'/]</div>
      </a>
    </li>
    {/dede:arclist}
  </ul>
</div>
<script>
jQuery(function($){
  var box = $('.slide-wrap');
  var ul = $('#picSlide');
  var li = ul.find('li');
  var speed = 2800;
  var w = 280;
  var index = 0;
  var slideTimer; // 改名,不和下方图文滚动timer冲突
  ul.append(li.first().clone());
  function autoPlay(){
    slideTimer = setInterval(function(){
      index++;
      ul.animate({left:-index*w},400,function(){
        if(index >= li.length){
          index = 0;
          ul.css('left',0);
        }
      })
    },speed);
  }
  box.hover(function(){clearInterval(slideTimer)},autoPlay);
  autoPlay();
})
</script>
</div>


评论(0)

昵称和内容不能为空

还没有评论,来抢沙发。

未播放
--:-- / --:--