phpcms에서 캐러셀을 구현하는 방법-PHPCMS-php.cn

phpcms에서 캐러셀을 구현하는 방법: 먼저 캐러셀 이미지를 추가하려는 위치에 "
...
"를 추가한 다음 필요에 따라 CSS 스타일을 변경합니다. , 캐러셀을 구현해야 하는 곳에 js 코드를 추가합니다.

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

회전식 이미지를 구현하는 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 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에서 캐러셀을 구현하는 방법