1、在这里分享一下怎么设置淘宝店铺的动态图片窗口,首先打开淘宝店铺——装修店铺,设置淘宝一个淘宝自定义窗口
2、拖动过自定义窗口在你所要显示的区域,松开鼠标,这个时候就设置成功了
3、点击编辑,弹出下面窗口,然后勾选左下角编辑源代码,这个时候你就进入了程序猿操作的页面,复制以下代码:<divclass="稆糨孝汶;layoutgrid-m0"data-componentid="231"data-context="bd"data-id="1041995155"data-prototypeid="231"data-widgetid="1041995155"> <divclass="col-main"> <divclass="main-wrap"data-modules="main"data-width="b950"style="overflow:visible;"> <divclass="skin-boxtb-module"> <sclass="skin-box-tp"></s> <divclass="skin-box-bdclear-fix"> <divclass="J_TWidget"data-widget-config="{"effect":"fade","circular":true,"contentCls":"tanchudiv"}"data-widget-type="Tabs"style="height:482px;overflow:hidden;"> <divclass="tanchudiv"style="height:500px;"> <divclass="footer-more-trigger"style="border-bottom:mediumnone;border-left:mediumnone;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;border-top:mediumnone;top:auto;border-right:mediumnone;padding-top:0px;left:50%;"> <divclass="footer-more-trigger"style="border-bottom:mediumnone;border-left:mediumnone;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;border-top:mediumnone;border-right:mediumnone;padding-top:0px;left:-50%;"> <divclass="J_TWidget"data-widget-config="{"contentCls":"taobao-kaidian-com","navCls":"taobaokaidian-com","effect":"scrollx","easing":"easeOutStrong","prevBtnCls":"prev","nextBtnCls":"next","autoplay":true,"viewSize":[1920],"circular":true}"data-widget-type="Carousel"> <divclass="J_TWidget"data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[-480,0],"points":["cc","cc"]}}"data-widget-type="Popup"style="display:none;"> <divclass="prev"style="font-size:100px;cursor:pointer;opacity:0.5;"> <span></span> </div> </div> <divclass="J_TWidget"data-widget-config="{"trigger":".ux1920","align":{"node":".ux1920","offset":[480,0],"points":["cc","cc"]}}"data-widget-type="Popup"style="display:none;"> <divclass="next"style="font-size:100px;cursor:pointer;opacity:0.5;"> <span></span> </div> </div> <divclass="ux1920"style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;overflow:hidden;padding-top:0px;"> <ulclass="taobao-kaidian-com"style="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;"> <listyle="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;"> <span><adata-attr-replace="百度经验百度经验百度经验百度经验"href="http://www.taobao.com/?scene=taobao_shop"style="padding-bottom:0px;margin:0px;padding-left:179px;padding-right:0px;padding-top:0px;"target="_blank"><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i2/766114671/TB28egVjXXXXXcRXXXXXXXXXXXX_!!766114671.jpg"border="0"height="482"width="1582"/></a></span> <> <listyle="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;"> <span><adata-attr-replace="百度经验百度经验百度经验百度经验"href="http://www.taobao.com/?scene=taobao_shop"style="padding-bottom:0px;margin:0px;padding-left:179px;padding-right:0px;padding-top:0px;"target="_blank"><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i1/766114671/TB2TvU7jXXXXXbXXXXXXXXXXXXX_!!766114671.jpg"border="0"height="482"width="1582"/></a></span> <> <listyle="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;"> <span><adata-attr-replace="百度经验百度经验百度经验百度经验"href="http://www.taobao.com/?scene=taobao_shop"style="padding-bottom:0px;margin:0px;padding-left:179px;padding-right:0px;padding-top:0px;"target="_blank"><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i1/766114671/TB2hxgGjXXXXXbRXpXXXXXXXXXX_!!766114671.jpg"border="0"height="482"width="1580"/></a></span> <> <listyle="padding-bottom:0px;margin:0px;padding-left:0px;width:1920px;padding-right:0px;height:500px;padding-top:0px;"> <span><adata-attr-replace="百度经验百度经验百度经验百度经验"href="http://www.taobao.com/?scene=taobao_shop"style="padding-bottom:0px;margin:0px;padding-left:179px;padding-right:0px;padding-top:0px;"target="_blank"><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i2/766114671/TB2kC.LjXXXXXaVXpXXXXXXXXXX_!!766114671.jpg"border="0"height="482"width="1582"/></a></span> <> </ul> </div> <divclass="footer-more-trigger"style="border-bottom:mediumnone;border-left:mediumnone;padding-bottom:0px;padding-left:0px;padding-right:0px;border-top:mediumnone;border-right:mediumnone;padding-top:0px;left:50%;"> <divclass="footer-more-trigger"style="border-bottom:mediumnone;border-left:mediumnone;padding-bottom:0px;padding-left:0px;width:1920px;padding-right:0px;height:45px;border-top:mediumnone;top:444px;border-right:mediumnone;padding-top:0px;left:-960px;"> <ulclass="taobaokaidian-com"style="border-bottom:mediumnone;text-align:center;border-left:mediumnone;margin:0pxauto;width:1920px;height:45px;border-top:mediumnone;border-right:mediumnone;"> <listyle="line-height:45px;margin:0px5px;display:inline;cursor:pointer;"> <span><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i2/766114671/TB28egVjXXXXXcRXXXXXXXXXXXX_!!766114671.jpg"style="border-bottom:#33CCFF2pxsolid;border-left:#33CCFF2pxsolid;margin:5px0px;vertical-align:middle;border-top:#33CCFF2pxsolid;margin-top:36px;border-right:#33CCFF2pxsolid;"border="0"height="28"width="186"/></span> <> <listyle="line-height:45px;margin:0px5px;display:inline;cursor:pointer;"> <span><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i1/766114671/TB2TvU7jXXXXXbXXXXXXXXXXXXX_!!766114671.jpg"style="border-bottom:#33CCFF2pxsolid;border-left:#33CCFF2pxsolid;margin:5px0px;vertical-align:middle;border-top:#33CCFF2pxsolid;margin-top:36px;border-right:#33CCFF2pxsolid;"border="0"height="28"width="186"/></span> <> <listyle="line-height:45px;margin:0px5px;display:inline;cursor:pointer;"> <span><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i1/766114671/TB2hxgGjXXXXXbRXpXXXXXXXXXX_!!766114671.jpg"style="border-bottom:#33CCFF2pxsolid;border-left:#33CCFF2pxsolid;margin:5px0px;vertical-align:middle;border-top:#33CCFF2pxsolid;margin-top:36px;border-right:#33CCFF2pxsolid;"border="0"height="28"width="186"/></span> <> <listyle="line-height:45px;margin:0px5px;display:inline;cursor:pointer;"> <span><imgdata-ks-lazyload="//gdp.alicdn.com/imgextra/i2/766114671/TB2kC.LjXXXXXaVXpXXXXXXXXXX_!!766114671.jpg"style="border-bottom:#33CCFF2pxsolid;border-left:#33CCFF2pxsolid;margin:5px0px;vertical-align:middle;border-top:#33CCFF2pxsolid;margin-top:36px;border-right:#33CCFF2pxsolid;"border="0"height="28"width="186"/></span> <> </ul> </div> </div> </div> </div> </div> <ulclass="ks-switchable-nav"style="display:none;"> </ul> </div> </div> </div> </div> </div> </div></div>
4、这个时候点确定,这样你就生成了一个属于你自己的,图片限制突破960的滚动划窗。你可以鼠标滑动试试,看看是不是很洋气,(当然这个时候你还没有成功,因为图片你还没有替换,现在显示的是其他的图片)
5、在这之前,你得先做好你要的图片上传到你的图片空间,打开店面装修页面,上面有图片空间,点击上传你的图片
6、上传成功后,鼠标放在你需要上传的图片上面
7、点击中间的类似别针的标示,复制图片代码(一点击,图片代码自动复制到后台)然后再回到下面编辑代码的页面
8、前台的动态窗口是四张图片,所以你需要替换四次,找到以下代码位置替换掉引号里面的内容"挢旗扦渌;//gdp.alicdn.艘早祓胂com/imgextra/i2/766114671/TB28egVjXXXXXcRXXXXXXXXXXXX_!!766114671.jpg"然后点击确定,然后你也可以显点击预览一下,是否是你需要的图片(这个引号区域是一张图片,刚才你复制了你空间图片的代码,然后直接选中这个引号区域内的图片,点击Ctrl+V(复制),这个代码总共有四处,分别对应的是四张前台图片),预览确认后,就可以点击发布了,设置成功啦