phpcms에서 캐러셀을 구현하는 방법

phpcms에서 캐러셀을 구현하는 방법: 먼저 캐러셀 이미지를 추가하려는 위치에 "

...

"를 추가한 다음 필요에 따라 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="/static/imghwm/default1.png"  data-src="{thumb($r[thumb],1200,320)}"  class="lazy"     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>

을 추가하세요.

이 초점 슬라이드는 특별하므로 그림과 텍스트를 두 번 호출해야 합니다. 추가로, 배경 컨텐츠 추가시 홈페이지 포커스 이미지 추천을 꼭 확인하시고, 홈페이지에 추가하시면 됩니다. 추천: "

phpcms tutorial"

2 물론 여기 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();
}

최종 효과

위 내용은 phpcms에서 캐러셀을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!