Taobao Store Karussell-Bild-HTML-Code-Organisation und teilweise Anpassung-HTML-Tutorial-php.cn

Dieser Artikel wird von der chinesischen PHP-Website bereitgestellt und stellt die Organisation und teilweise Anpassung des HTML-Codes für Karussellbilder in Taobao-Geschäften vor.

1. Hauptcode

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

Nach dem Login kopieren

1. Ändern Sie den linken Pfeil

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

Nach dem Login kopieren

2 . Ändern Sie den rechten Pfeil:

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

Nach dem Login kopieren

zu:

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

Nach dem Login kopieren

3. Die Pfeile werden links platziert:


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

Nach dem Login kopieren

wird geändert in:

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

Nach dem Login kopieren

4. Die Miniaturansichten unten werden in Zahlen geändert:

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

Nach dem Login kopieren

wird geändert an:

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

Nach dem Login kopieren

5. Das untere halbtransparente Bild gefällt mir nicht:

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

Nach dem Login kopieren

Löschen:

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

Nach dem Login kopieren

6. Ändern Sie den Scroll-Animationseffekt:

Suchen Sie nach „Effekt“: „scrollx“ und ändern Sie „scrollx“ in „scrolly“, um vertikal zu scrollen, und in „fade“, um ein- und auszublenden.

7. Ändern Sie die Scroll-Animationsgeschwindigkeit:

Fügen Sie nach „effect“ ein Attribut „duration“:0.5 hinzu: „scrollx“.
Der Standardwert ist 0,5, falls erforderlich Beschleunigen Sie das Scrollen. Ändern Sie die Geschwindigkeit von 0,5 auf 0,1. Wenn Sie eine langsamere Scrollgeschwindigkeit benötigen, erhöhen Sie die Geschwindigkeit auf 0,9.

Artikeladresse: http://www.php.cn/div-tutorial-377487.html

Um Programmieren zu lernen, besuchen Sie die chinesische PHP-Website www.php.cn

Das obige ist der detaillierte Inhalt vonTaobao Store Karussell-Bild-HTML-Code-Organisation und teilweise Anpassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!