phpcms实现轮播的方法：首先在想要加轮播图的位置加入“

”；然后根据自己的需求对css样式进行更改；最后在需要实现轮播的地方加入js代码即可。

phpcms首页实现轮播图

1.在你想要加轮播图的位置加入以下

{pc:content action="position" posid="1" thumb="1" order="listorder DESC" num="5"}

{loop $data $r}

{/loop}

{/pc}

{pc:content action="lists" catid="" thumb="1" order="listorder DESC" num="5"}

{loop $data $r}

{str_cut($r[title],20)}

{/loop}

{/pc}

<

>

由于这个焦点幻灯比较特殊，图片和文字需要两次调用，另外，后台添加内容时要勾选首页焦点图推荐，就可以添加到首页

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;

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();

}

最终效果