Comment implémenter un carrousel dans phpcms

Comment implémenter un carrousel dans phpcms : ajoutez d'abord "

...

" à l'endroit où vous souhaitez ajouter une image de carrousel, puis modifiez le style CSS selon le vôtre ; a besoin d'apporter des modifications ; enfin, ajoutez du code js là où vous devez implémenter le carrousel.

Page d'accueil de Phpcms pour implémenter des images de carrousel

1 Ajoutez le

suivant où vous souhaitez ajouter des images de carrousel

<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="max-width:90%" 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>

.

Étant donné que ce diaporama de focus est spécial, l'image et le texte doivent être appelés deux fois. De plus, lors de l'ajout de contenu en arrière-plan, vous devez vérifier la recommandation d'image de focus de la page d'accueil, puis vous pouvez l'ajouter à la page d'accueil

Recommandation : "

Tutoriel phpcms》

2. Bien sûr, le style CSS ici peut être modifié en fonction de vos propres besoins. Je ne publierai pas le code CSS ici. Pour implémenter le carrousel, vous devez ajouter le code js suivant

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

Effet final

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!