Shulou(Shulou.com)06/02 Report--

Today, I would like to talk to you about how to achieve phpcms rotation, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something from this article.

The method of phpcms to realize carousel: first, add "..." to the location where you want to add the carousel graph; then change the css style according to your own needs; finally, add the js code where you need to implement carousel.

Realize the carousel map on the home page of phpcms

1. Add the following to the location where you want to add the broadcast picture

{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}

Because this focus slide is special, pictures and text need to be called twice. In addition, when adding content in the background, you need to check the focus map recommendation on the home page, and you can add it to the home page.

two。 Of course, the css style in this is changed according to your own needs, so the css code will not be posted here. The following js code needs to be added to implement carousel.

_ window.onload=function () {/ / get element var flowDiagram = document.getElementById ('flowDiagram'); / / Container 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 () {/ / respond to 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();} 最终效果

After reading the above, do you have any further understanding of how to achieve phpcms rotation? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.