搜索

首页 >web前端 >html教程 >淘宝网店轮播图片html代码整理及局部调整

淘宝网店轮播图片html代码整理及局部调整

PHP中文网
PHP中文网原创
2017-08-26 17:35:053221浏览

本文由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="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>

改为：

    <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.不喜欢底部半透明图片：

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

删除：

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



6.修改滚动动画效果：

找到'effect': 'scrollx'  把scrollx改为scrolly就是垂直滚动，改为fade就是淡隐淡现。

7.修改滚动动画速度：

在'effect': 'scrollx',后面添加一个属性 'duration':0.5,
默认值就是0.5，如果需要加快滚动速度，把0.5改为0.1；需要滚动速度慢一点，就把0.5加大，建议改为0.9以内。

文章地址：http://www.php.cn/div-tutorial-377487.html

学编程就来PHP中文网  www.php.cn

以上是淘宝网店轮播图片html代码整理及局部调整的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：移动WEB布局视频教程下一篇：韩顺平H5游戏开发坦克大战视频源码课件分享

相关文章

查看更多