Organisation du code HTML de l'image du carrousel de la boutique Taobao et ajustement partiel

Cet article est fourni par le site php chinois, qui présente l'organisation et l'ajustement partiel du code html des images carrousel dans les magasins Taobao.

1. Code principal

<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. Modifier la flèche gauche

<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 . Modifier la flèche droite :

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

en :

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

3. Les flèches sont placées à gauche :

        
<
    

    

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

est remplacé par :

<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. Les vignettes ci-dessous sont remplacées par des chiffres :

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

est modifié. à :

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

5. Je n'aime pas la photo translucide du bas :

<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;">

Supprimer :

background: url(http://demo.taobaoux.com/Carousel/Carousel_bg.png) repeat;

6. Modifiez l'effet d'animation de défilement :

Trouvez 'effet' : 'scrollx' et changez scrollx en scrolly pour faire défiler verticalement, et en fondu pour faire un fondu entrant et sortant.

7. Modifiez la vitesse de l'animation de défilement :

Ajoutez un attribut 'duration':0,5 après 'effect' : 'scrollx',
La valeur par défaut est 0,5, si vous en avez besoin. accélérer le défilement Pour la vitesse, changez 0,5 en 0,1 ; ​​si vous avez besoin d'une vitesse de défilement plus lente, augmentez 0,5. Il est recommandé de la modifier à 0,9.

Adresse de l'article : http://www.php.cn/div-tutorial-377487.html

Pour apprendre la programmation, rendez-vous sur le site Web PHP chinois www.php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!