首页 > 代码库 > 淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作

  • |
  • 浏览:1081
  • |
  • 更新:2014-09-27 12:03
  • |
  • 标签: 淘宝 

很多朋友都想要做全屏轮播图,接下来我来说说我的经验

工具/原料

  • 美图秀秀

方法/步骤

  1.  

    1、首先要制作或者搜寻图片宽度1920高度610的高画质图片

    2、上传到淘宝图片空间,并复制其连接

    3、将复制的连接替换到如下图以“jpg”结尾的那个地方。(有3个地方,可用3张图替换)

    4、复制代码,进入淘宝店铺装修页面,新建“自定义内容区”

    5、将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,完成

  2.  

    图片可在网上搜索下载,亦或是可以用美图秀秀简单制作,如果大神会PS那就更好了。接下去就是上传图片,复制链接,替换下面代码中我加粗的地方。然后按照步骤即可完成。具体效果可看http://shop105578383.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.5.V8uOXe

  3.  

    <div class="J_TWidget" data-widget-config="{‘effect‘: ‘fade‘, ‘circular‘: true ,‘contentCls‘:‘bslide_cAFTq‘}" data-widget-type="Tabs">

    <div class="bslide_cAFTq" style="height:630px;">

    <div class="J_TWidget" data-widget-config="{‘navCls‘:‘scroller-nav‘,‘contentCls‘:‘scroller-content‘,‘steps‘:1,‘prevBtnCls‘: ‘prev‘,‘nextBtnCls‘: ‘next‘,‘disableBtnCls‘: ‘disable‘,

     

    ‘circular‘:true,

     

    ‘effect‘:‘scrollx‘,

     

    ‘easing‘:‘easeOut‘,

     

    ‘duration‘:1.0,

     

    ‘interval‘:‘4‘,

     

    ‘autoplay‘:true}" data-widget-type="Carousel" style="height:640px;width:1920px;left:-485px;top:0;">

    <div class="J_TWidget" data-widget-config="{‘trigger‘:‘.bslide_cAFTq‘,‘align‘:{‘node‘:‘.bslide_cAFTq‘,‘offset‘:[0,0],‘points‘:[‘cc‘,‘cc‘]}}" data-widget-type="Popup" style="display:none;width:950px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.5;">

    <span class="prev J_TWidget" style="cursor:pointer;float:left;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat;"></span> <span class="next J_TWidget" style="cursor:pointer;float:right;display:block;width:59px;height:59px;background:url(http://img03.taobaocdn.com/imgextra/i3/60358248/T2zFRjXxxaXXXXXXXX-60358248.gif) no-repeat right 0;"></span></div>

    <div class="scroller" style="width:1920px;height:610px;overflow:hidden;">

    <ul class="scroller-content">

    <li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">

    <a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img01.taobaocdn.com/imgextra/i1/60358248/T2w_JWXcpeXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>

    <li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">

    <a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img02.taobaocdn.com/imgextra/i2/60358248/T2tLhaXBhaXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>

    <li style="width:1920px;height:610px;overflow:hidden;border:none;background:#FFF;margin:0;">

    <a href="http://shop105578383.taobao.com/ugo.htm?spm=a1z10.1.w5002-8741458642.3.Iya91p" style="display:block;cursor:pointer;width:1920px;height:610px;background:url(http://img02.taobaocdn.com/imgextra/i2/60358248/T2V2PTXbBbXXXXXXXX-60358248.jpg) no-repeat center 0;" target="_blank"></a></li>

    </ul>

    </div>

    <ul class="scroller-nav" style="width:950px;color:#FA9090;font-size:20px;font-family:tahoma;margin-left:930px;">

    <li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">

    ●</li>

    <li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">

    ●</li>

    <li style="width:20px;height:20px;line-height:20px;text-align:center;display:inline-block;*zoom:1;*display:inline;cursor:pointer;">

    ●</li>

    </ul>

    </div>

    </div>

    <ul class="ks-switchable-nav" style="display:none;">

    <li class="ks-active">

    1</li>

    </ul>

    </div>

    <p>

    <a name="sgmb"></a></p>

     

淘宝店铺首页全屏轮播图制作