phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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">
以上就是phpcms如何实现轮播的详细内容，更多请关注php中文网其它相关文章！