淘宝網ストアのカルーセル画像のHTMLコードの整理と部分的な調整-htmlチュートリアル-php.cn

淘宝網ストアのカルーセル画像のHTMLコードの整理と部分的な調整

PHP中文网

リリース： 2017-08-26 17:35:05

オリジナル

3215 人が閲覧しました

この記事はphp中国語ウェブサイトから提供されており、タオバオストアのカルーセル画像のhtmlコードの構成と部分的な調整を紹介しています。

1. メインコード

<p class="J_TWidget" data-widget-config="{&#39;effect&#39;: &#39;fade&#39;, &#39;circular&#39;: true ,&#39;contentCls&#39;:&#39;taobaoux&#39;}" data-widget-type="Tabs" style="height:545px;overflow:hidden;">
      <p class="taobaoux" style="height:550px;">
            <p class="footer-more-trigger" style="width:1920px;height:550px;top:auto;padding:0px;border:none;left:50%;">
                <p class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
                
                  <p data-widget-config="{&#39;contentCls&#39;: &#39;taobaoux-com&#39;,&#39;navCls&#39;: &#39;bbs-taobaoux-com&#39;,&#39;effect&#39;: &#39;scrollx&#39;,&#39;easing&#39;: &#39;easeOutStrong&#39;,&#39;prevBtnCls&#39;:&#39;prev1920&#39;,&#39;nextBtnCls&#39;:&#39;next1920&#39;,&#39;autoplay&#39;: true,&#39;viewSize&#39;:[1920],&#39;circular&#39;: true}" data-widget-type="Carousel" class="J_TWidget">
                        
                        <p class="J_TWidget" data-widget-config="{&#39;trigger&#39;:&#39;.ux1920&#39;,&#39;align&#39;:{&#39;node&#39;:&#39;.ux1920&#39;,&#39;offset&#39;:[-500,0],&#39;points&#39;:[&#39;cc&#39;,&#39;cc&#39;]}}" data-widget-type="Popup" style="display:none;">
                            <p class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</p>
                        </p>
              <p class="J_TWidget" data-widget-config="{&#39;trigger&#39;:&#39;.ux1920&#39;,&#39;align&#39;:{&#39;node&#39;:&#39;.ux1920&#39;,&#39;offset&#39;:[500,0],&#39;points&#39;:[&#39;cc&#39;,&#39;cc&#39;]}}" data-widget-type="Popup" style="display:none;">
                            <p class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></p>
                        </p>
                   
                        <p style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
                            <ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
                              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="1920px" height="550px" border="0px"></a></li>
                              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
                              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
                              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="1920px" height="550px" border="0px"></a></li>
                              <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                                <a target="_blank"  href="http://tbux.taobao.com/" style="padding:0px;margin:0px;">
                                    <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="1920px" height="550px" border="0px"></a></li>
                            </ul>
                        </p>
       
                        <p class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
                            <p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
                                <ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
                                    <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                        <img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                    <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                        <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                    <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                        <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                    <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                        <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                    <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                        <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                </ul>   
                            </p>   
                        </p>  
                        
                    </p>
                   
                </p>
            </p>
        </p>
       
      <ul class="ks-switchable-nav" style="display:none;"></ul>
       
    </p>

ログイン後にコピー

1. 左矢印

<p class="prev1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;"><</p>  
<p class="prev1920" style="width:97px;height:97px;"><img src="左箭头图片地址" /> </p>

ログイン後にコピー

2. 右矢印

<p class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></p>

ログイン後にコピー

を

  <p class="next1920" style="width:97px;height:97px;">     <img src="右箭头图片地址" /></p>

ログイン後にコピー

3. 矢印はすべて上にあります左:


        
<
    
    
        <p class="next1920" style="font-size:100px;cursor:pointer;opacity:0.5;color:#f00;">></p>

ログイン後にコピー

は次のように変更されます:

<p class="J_TWidget" data-widget-config="{&#39;trigger&#39;:&#39;.ux1920&#39;,&#39;align&#39;:{&#39;node&#39;:&#39;.ux1920&#39;,&#39;offset&#39;:[-500,0],&#39;points&#39;:[&#39;cc&#39;,&#39;cc&#39;]}}" data-widget-type="Popup" style="display:none;">
        <p class="prev1920" style="width:97px;height:97px;margin-left: 97px;">
            <img src="左箭头图片地址" /></p>
        <p class="next1920" style="width:97px;height:97px;">
            <img src="右箭头图片地址" /></p>
    </p>

ログイン後にコピー

4. 下のサムネイルは次のように変更されます:

 <p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">
    <ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
      <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
         <img src="http://demo.taobaoux.com/Carousel/1920/1920.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
      <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
        <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
      <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
       <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
     <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
       <img src="http://demo.taobaoux.com/Carousel/1920/1920_2.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
     <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
       <img src="http://demo.taobaoux.com/Carousel/1920/1920_3.jpg" width="120px" height="39px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
   </ul>   
</p>

ログイン後にコピー

は次のように変更されます:

5. 下の半透明の画像が気に入らない場合:

    <p class="footer-more-trigger" style="width:1920px;height:30px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:525px;">
                            <ul class="bbs-taobaoux-com" style="width:950px;height:30px;margin:0 auto;text-align: center;">
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">1</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">2</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">3</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">4</li>
                                <li style="display: inline;margin: 0 5px;padding: 5px;opacity: 0.5;cursor:pointer;color:#000;background:#fff;line-height:30px;">5</li>
                            </ul>   
                        </p>

ログイン後にコピー

削除:

<p class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;top:505px;">

ログイン後にコピー

6. スクロールアニメーション効果を変更します:

「effect」を検索: 'scrollx' 垂直方向にスクロールするには、scrollx を scrolly に変更し、フェードインおよびフェードアウトするには、fade に変更します。

7. スクロールアニメーションの速度を変更します:

'effect' の後に属性 'duration' を追加します: 'scrollx': 0.5、
デフォルト値は 0.5 です。スクロールを高速化する必要がある場合は、0.5 を 0.1 に変更します。スクロールが必要です。速度が遅い場合は、0.5 を大きくします。0.9 未満に変更することをお勧めします。

記事のアドレス: //m.sbmmt.com/div-tutorial-377487.html

プログラミングを学ぶには、PHP 中国語 Web サイト m.sbmmt.com

にアクセスしてください。

以上が淘宝網ストアのカルーセル画像のHTMLコードの整理と部分的な調整の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。