专递能量HLFgzs.com一阳网

一阳网

当前位置: 主页 > 技术支持 > 网络

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

时间:2026-07-25 16:59来源:未知 作者:亚垚 点击:
彻底替换成 HTML5 轮播(根治,永久解决) 直接删掉整个 首页模板 div class="flashnews".../div 全部 Flash 代码,替换成 HTML5 轮播,不受 Flash 限制,可以稳定循环。 给你一套适配你页面尺寸

彻底替换成 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 src="/uploads/allimg/260725/1AZa596-1.jpg"></script>
<script>
$(function(){
  var box = $('.slide-wrap');
  var ul = $('#picSlide');
  var li = ul.find('li');
  var speed = 2800;    //停留时间(毫秒)
  var w = 280;
  var index = 0;
  var timer;
  //复制第一张实现无缝循环
  ul.append(li.first().clone());
  function autoPlay(){
    timer = 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(timer)},autoPlay);
  autoPlay();
})
</script>
</div>


(责任编辑:亚垚)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容