phpcms如何实现轮播

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}
        
        

        
        
 
> 
    

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

推荐：《phpcms教程》

立即学习“PHP免费学习笔记（深入）”；

2.当然，这里面的css样式根据自己的需求做更改，在这里就不贴出css代码了，实现轮播需要加入以下js代码

[removed]=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  -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) 
最终效果

以上就是phpcms如何实现轮播的详细内容，更多请关注慧达安全导航其它相关文章！