phpcmsでカルーセルを実装する方法

phpcms でカルーセルを実装する方法: まず、カルーセル画像を追加する場所に「

...

」を追加し、次に、必要に応じて CSS スタイルを調整します。独自のニーズ 変更を加え、最後にカルーセルを実装する必要がある場所に JS コードを追加します。

カルーセル画像を実装するための phpcms ホームページ

1. カルーセル画像を追加する場所に次の

を追加します。

このフォーカス スライドショーは特別であるため、画像とテキストを 2 回呼び出す必要があります。また、バックグラウンドでコンテンツを追加するときは、ホームページのフォーカス画像の推奨事項を確認する必要があり、それをホームページに追加できます

おすすめ: 「 phpcms チュートリアル >>

2。もちろん、ここの CSS スタイルは必要に応じて変更できます。ここには CSS コードを投稿しません。カルーセルを実装するには、次の JS コードを追加する必要があります##

<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でカルーセルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。