|
彻底替换成 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>
(责任编辑:亚垚) |