今天就跟大家聊聊有关如何实现phpcms轮播，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
phpcms实现轮播的方法：首先在想要加轮播图的位置加入“<div id="flowDiagram" >...</div>”；然后根据自己的需求对css样式进行更改；最后在需要实现轮播的地方加入js代码即可。
phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下
计算
安全
数据库
网络和加速
企业服务
<div id="flowDiagram" >
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div id="photo" style="left:-1200px;">
<div>
{pc:content action="position" posid="1" thumb="1" order="listorder DESC" num="5"}
{loop $data $r}
<div ><a href="{$r[url]}" target="_blank" title="{$r[title]}"><img src="{thumb($r[thumb],1200,320)}" style="width:1200px; height:320px;" alt="{$r[title]}" /></a></div>
{/loop}
{/pc}
<ul>
{pc:content action="lists" catid="" thumb="1" order="listorder DESC" num="5"}
{loop $data $r}
<li><a href="{$r[url]}" target="_blank" title="{$r[title]}">{str_cut($r[title],20)}</a></li>
{/loop}
{/pc}
</ul>
<div></div>
</div>
</div>
<span id="pre" class="arrow"> <</span>
<span id="next" class="arrow">> </span>
</div>由于这个焦点幻灯比较特殊，图片和文字需要两次调用，另外，后台添加内容时要勾选首页焦点图推荐，就可以添加到首页
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 < button.length; i++) {
if(button[i].className == "on"){
button[i].className = "";
break;
}
}
button[index-1].className = "on";
}
pre.onclick=function() {
if (index == 1)
index = 5;
else
index = index - 1;
buttonlight();
photo.style.left = parseInt(photo.style.left) + 1200 + "px";
if (parseInt(photo.style.left) > -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) < -6000){
photo.style.left = -1200 + "px";
}
}
for (var i = 0; i < button.length; i++){
button[i].onclick = function()
{
if(this.className=="on")
return;
var currentindex = parseInt(this.getAttribute("index"));//getAttribute能获取自定义的属性值，也可以获取自带的属性值
var distance = currentindex - index;
photo.style.left = parseInt(photo.style.left) - 1200 * distance + "px";
index = currentindex;
buttonlight();
}
}
flowDiagram.onmouseover = stop;
flowDiagram.onmouseout = move;
move();
}最终效果
看完上述内容，你们对如何实现phpcms轮播有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
