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"> &lt;</span>
 <span id="next" class="arrow">&gt; </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();
 }

最终效果