phpcms如何实现轮播

互联网 20-7-21

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>

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

推荐：《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;         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(); }

最终效果