phpcms實現輪播的方法：首先在想要加輪播圖的位置加入“…”；然后根據自己的需求對css樣式進行更改；最后在需要實現輪播的地方加入JS代碼即可。
phpcms首頁實現輪播圖
1.在你想要加輪播圖的位置加入以下
<div> ??????????<div> ????????????<span></span> ????????????<span></span> ????????????<span></span> ????????????<span></span> ??????????????<span></span> ??????????</div> ??????????<div> ????????<div> ???????????{pc:content??action="position"?posid="1"?thumb="1"?order="listorder?DESC"?num="5"} ????????{loop?$data?$r} ????????<div><a>@@##@@</a></div> ????????{/loop} ????????{/pc} ????????<ul> ????????{pc:content??action="lists"?catid=""?thumb="1"?order="listorder?DESC"?num="5"} ????????{loop?$data?$r} ????????<li><a>{str_cut($r[title],20)}</a></li> ????????{/loop} ????????{/pc} ????????</ul> ????????<div></div> ????????</div> ????????</div> <span>? <span>>?</span> ????</span> </div>
由于這個焦點幻燈比較特殊，圖片和文字需要兩次調用，另外，后臺添加內容時要勾選首頁焦點圖推薦，就可以添加到首頁
推薦：《phpcms教程》
立即學習“PHP免費學習筆記（深入）”；
2.當然，這里面的css樣式根據自己的需求做更改，在這里就不貼出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??-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)?<p>最終效果</p><p><img alt="phpcms如何實現輪播" ></p><img src="https://img.php.cn/upload/image/105/800/776/1595296543735587.png" title="1595296543735587.png" alt="企業微信截圖_15952965381830.png">
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦
