創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)公司是專業(yè)的績(jī)溪網(wǎng)站建設(shè)公司，績(jī)溪接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行績(jī)溪網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

今天就跟大家聊聊有關(guān)如何實(shí)現(xiàn)phpcms輪播，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

phpcms實(shí)現(xiàn)輪播的方法：首先在想要加輪播圖的位置加入“

...

”；然后根據(jù)自己的需求對(duì)css樣式進(jìn)行更改；最后在需要實(shí)現(xiàn)輪播的地方加入js代碼即可。

phpcms首頁(yè)實(shí)現(xiàn)輪播圖

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}
        
        

        
        
 <
> 
    

由于這個(gè)焦點(diǎn)幻燈比較特殊，圖片和文字需要兩次調(diào)用，另外，后臺(tái)添加內(nèi)容時(shí)要勾選首頁(yè)焦點(diǎn)圖推薦，就可以添加到首頁(yè)

2.當(dāng)然，這里面的css樣式根據(jù)自己的需求做更改，在這里就不貼出css代碼了，實(shí)現(xiàn)輪播需要加入以下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(){//當(dāng)right鍵被觸發(fā)時(shí)響應(yīng)
        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();
}

最終效果

看完上述內(nèi)容，你們對(duì)如何實(shí)現(xiàn)phpcms輪播有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)標(biāo)題：如何實(shí)現(xiàn)phpcms輪播-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/hhgsp.html