phpcms如何实现轮播

phpcms首页实现轮播图

1.在你想要加轮播图的位置加入以下<div id="flowDiagram" ><div id="button"><span index="1">由于这个焦点幻灯比较特殊，图片和文字需要两次调用，另外，后台添加内容时要勾选首页焦点图推荐，就可以添加到首页

推荐：《phpcms教程》

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;elseindex = 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;elseindex = 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如何实现轮播的详细内容，更多请关注小潘博客其它相关文章！