phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下
推荐:《phpcms教程》
2.当然,这里面的css样式根据自己的需求做更改,在这里就不贴出css代码了,实现轮播需要加入以下js代码window.οnlοad=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.οnclick=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();}最终效果