phpcms实现轮播的方法：首先在想要加轮播图的位置加入“…”；然后根据自己的需求对css样式进行更改；最后在需要实现轮播的地方加入JS代码即可。
phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下
<div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <div> {pc:content action="position" posid="1" thumb="1" order="listorder DESC" num="5"} {loop $data $r} <div><a>@@##@@</a></div> {/loop} {/pc} <ul> {pc:content action="lists" catid="" thumb="1" order="listorder DESC" num="5"} {loop $data $r} <li><a>{str_cut($r[title],20)}</a></li> {/loop} {/pc} </ul> <div></div> </div> </div> <span> <span>> </span> </span> </div>
由于这个焦点幻灯比较特殊，图片和文字需要两次调用，另外，后台添加内容时要勾选首页焦点图推荐，就可以添加到首页
推荐：《phpcms教程》
立即学习“PHP免费学习笔记（深入）”；
2.当然，这里面的css样式根据自己的需求做更改，在这里就不贴出css代码了，实现轮播需要加入以下js代码
window.onload=function(){//获取元素 var flowDiagram = document.getElementById('flowDiagram');//容器 var photo = document.getElementById("photo"); var button = document.getElementById("button").getElementsByTagName('span'); var pre = document.getElementById("pre"); var next = document.getElementById("next"); var index = 1; var m; function move(){ m = setInterval(next.onclick,3000); } function stop(){ if(m)clearInterval(m); } function buttonlight(){ for (var i = 0; i -1200){ photo.style.left = -6000 + "px"; } } next.onclick = function(){//当right键被触发时响应 if (index == 5) index = 1; else index = index + 1; buttonlight(); photo.style.left = parseInt(photo.style.left) - 1200 + "px"; if (parseInt(photo.style.left) <p>最终效果</p><p><img alt="phpcms如何实现轮播" ></p><img src="https://img.php.cn/upload/image/105/800/776/1595296543735587.png" title="1595296543735587.png" alt="企业微信截图_15952965381830.png">
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
