今天给大家分享一款限时抢购特效模板代码,三组宝贝滑动切换,适用于淘宝首页装修。 下面为代码区: <div class="J_TWidget" data-widget-config="{'navCls':'hidden-nav','effect':'scrolly','contentCls':'sg-content','circular':true,'easing':'easeOutStrong','duration':1.0,'interval':'4','autoplay':false}" data-widget-type="Carousel"><div style="overflow:hidden;width: 948px;font-family: Arial;border:1px solid #a888c1; padding:20px 0px;background-color:#FFF;"> <div style="float:left;overflow:hidden;width: 640px;height: 350px;"> <ul class="sg-content"> <li style="float:left;overflow:hidden;width:640px;color:#323232"> <div style="float:left; width:270px; margin:0 10px ;"> <div style="height: 56px; line-height:50px;background: url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2.YVDcFXXXXa8XXXXXXXXXXXX-770458061.gif) no-repeat center center;border-radius: 5px;font-family: 微软雅黑;"> <span style="font-size: 30px;display: block; float: left; color:#fff; margin-left: 10px;">今日特售</span> <span style="font-size: 18px;display: block; float: right;color:#fff; margin-right:10px;">¥ 99.00</span> </div> <div style=";width:270px;height:50px;overflow:hidden;margin-top:20px;;"> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;border-left:none;"><div style="margin-bottom:5px;">原价</div> <div>¥99.00</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">折扣</div> <div>无</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">立省</div> <div>0</div> </div> </div> <div class="J_TWidget" data-widget-config="{'endTime':'2015-12-25 23:59:00', 'interval':1000, 'timeRunCls':'.sg-run', 'timeUnitCls':{'d':'.day','h':'.hours','m':'.minutes','s':'.seconds'}, 'minDigit':1, 'timeEndCls':'.sg-end' }" data-widget-type="Countdown" > <div class="time-count sg-run" > <span style="font-size:16px;display: block;margin: 10px 10px 10px 20px;color:#323232;">离活动结束还剩:</span> <div style="height:30px;line-height: 30px;text-align: center;margin: 0 10px;"> <span class="day" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">天</span> <span class="hours" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">小时</span> <span class="minutes" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">分</span> <span class="seconds" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">秒</span> </div> </div> </div> <div style="font-size:16px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">推荐理由1</div> <p style="font-size:14px;height:80px;px;line-height: 20px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是</p> <div class="sns-widget" title="分享" style="cursor:pointer;display:inline-block;*zoom:1;*display:inline;width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" data-sharebtn="{"client_id":"68","skinType":"3","comment":"成人模板 成人用品店铺装修模板 专业版永久使用 包安装 包审核","isShowFriend":false,"type":"item","key":"17503642751"}">分享</div> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://favorite.taobao.com/popup/add_collection.htm?id=17503642751&itemtype=1" title="收藏" target="_blank" >收藏</a> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://item.taobao.com/item.htm?id=17503642751" title="购买" target="_blank" >购买</a> </div> <a href="http://item.taobao.com/item.htm?id=17503642751" target="_blank" style="float:right;display:block;overflow:hidden;width:350px;height:350px;background:#fff url(http://img01.taobaocdn.com/bao/uploaded/i1/14322024077293692/T1eTJfFoxgXXXXXXXX_!!0-item_pic.jpg_350x350.jpg) no-repeat center center;" ></a> </li> <li style="float:left;overflow:hidden;width:640px;color:#323232"> <div style="float:left; width:270px; margin:0 10px ;"> <div style="height: 56px; line-height:50px;background: url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2.YVDcFXXXXa8XXXXXXXXXXXX-770458061.gif) no-repeat center center;border-radius: 5px;font-family: 微软雅黑;"> <span style="font-size: 30px;display: block; float: left; color:#fff; margin-left: 10px;">今日特售</span> <span style="font-size: 18px;display: block; float: right;color:#fff; margin-right:10px;">¥ 30.00</span> </div> <div style=";width:270px;height:50px;overflow:hidden;margin-top:20px;;"> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;border-left:none;"><div style="margin-bottom:5px;">原价</div> <div>¥30.00</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">折扣</div> <div>无</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">立省</div> <div>0</div> </div> </div> <div class="J_TWidget" data-widget-config="{'endTime':'2015-12-25 23:59:00', 'interval':1000, 'timeRunCls':'.sg-run', 'timeUnitCls':{'d':'.day','h':'.hours','m':'.minutes','s':'.seconds'}, 'minDigit':1, 'timeEndCls':'.sg-end' }" data-widget-type="Countdown" > <div class="time-count sg-run" > <span style="font-size:16px;display: block;margin: 10px 10px 10px 20px;color:#323232;">离活动结束还剩:</span> <div style="height:30px;line-height: 30px;text-align: center;margin: 0 10px;"> <span class="day" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">天</span> <span class="hours" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">小时</span> <span class="minutes" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">分</span> <span class="seconds" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">秒</span> </div> </div> </div> <div style="font-size:16px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">推荐理由2</div> <p style="font-size:14px;height:80px;px;line-height: 20px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域</p> <div class="sns-widget" title="分享" style="cursor:pointer;display:inline-block;*zoom:1;*display:inline;width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" data-sharebtn="{"client_id":"68","skinType":"3","comment":"淘宝店铺装修一键安装350模板夏日清凉女装休闲模板-> B137-1","isShowFriend":false,"type":"item","key":"39545513426"}">分享</div> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://favorite.taobao.com/popup/add_collection.htm?id=39545513426&itemtype=1" title="收藏" target="_blank" >收藏</a> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://item.taobao.com/item.htm?id=39545513426" title="购买" target="_blank" >购买</a> </div> <a href="http://item.taobao.com/item.htm?id=39545513426" target="_blank" style="float:right;display:block;overflow:hidden;width:350px;height:350px;background:#fff url(http://img02.taobaocdn.com/bao/uploaded/i2/T1vmWrFj4hXXXXXXXX_!!0-item_pic.jpg_350x350.jpg) no-repeat center center;" ></a> </li> <li style="float:left;overflow:hidden;width:640px;color:#323232"> <div style="float:left; width:270px; margin:0 10px ;"> <div style="height: 56px; line-height:50px;background: url(http://img01.taobaocdn.com/imgextra/i1/770458061/TB2.YVDcFXXXXa8XXXXXXXXXXXX-770458061.gif) no-repeat center center;border-radius: 5px;font-family: 微软雅黑;"> <span style="font-size: 30px;display: block; float: left; color:#fff; margin-left: 10px;">今日特售</span> <span style="font-size: 18px;display: block; float: right;color:#fff; margin-right:10px;">¥ 30.00</span> </div> <div style=";width:270px;height:50px;overflow:hidden;margin-top:20px;;"> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;border-left:none;"><div style="margin-bottom:5px;">原价</div> <div>¥30.00</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">折扣</div> <div>无</div> </div> <div style=";float:left;padding-top:5px;text-align:center;width:89px;border-left:1px dashed #323232;font-size:12px; ;"><div style="margin-bottom:10px;">立省</div> <div>0</div> </div> </div> <div class="J_TWidget" data-widget-config="{'endTime':'2015-12-25 23:59:00', 'interval':1000, 'timeRunCls':'.sg-run', 'timeUnitCls':{'d':'.day','h':'.hours','m':'.minutes','s':'.seconds'}, 'minDigit':1, 'timeEndCls':'.sg-end' }" data-widget-type="Countdown" > <div class="time-count sg-run" > <span style="font-size:16px;display: block;margin: 10px 10px 10px 20px;color:#323232;">离活动结束还剩:</span> <div style="height:30px;line-height: 30px;text-align: center;margin: 0 10px;"> <span class="day" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">天</span> <span class="hours" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">小时</span> <span class="minutes" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">分</span> <span class="seconds" style=" font-size:21px;">0</span> <span style=" font-size:14px;color:#323232">秒</span> </div> </div> </div> <div style="font-size:16px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">推荐理由3</div> <p style="font-size:14px;height:80px;px;line-height: 20px;font-family: 微软雅黑;margin: 10px 10px 10px 20px;overflow:hidden;">这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域这是文本域</p> <div class="sns-widget" title="分享" style="cursor:pointer;display:inline-block;*zoom:1;*display:inline;width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" data-sharebtn="{"client_id":"68","skinType":"3","comment":"淘宝店铺装修一键安装350模板女装新格调全套装修模板-> B127-1","isShowFriend":false,"type":"item","key":"39516211889"}">分享</div> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://favorite.taobao.com/popup/add_collection.htm?id=39516211889&itemtype=1" title="收藏" target="_blank" >收藏</a> <a style="width: 55px;height:20px;float: left; color:#fff; border-radius: 10px;text-decoration: none; outline: none;margin-left:25px; display: block;line-height:20px; text-align: center; background: #b68dd3;" href="http://item.taobao.com/item.htm?id=39516211889" title="购买" target="_blank" >购买</a> </div> <a href="http://item.taobao.com/item.htm?id=39516211889" target="_blank" style="float:right;display:block;overflow:hidden;width:350px;height:350px;background:#fff url(http://img01.taobaocdn.com/bao/uploaded/i1/T1yzaGFkxdXXXXXXXX_!!0-item_pic.jpg_350x350.jpg) no-repeat center center;" ></a> </li> </ul> </div> <div style="float:right;width:300px;height: 350px;overflow:hidden;font-family: 微软雅黑;color: #323232"> <ul class="hidden-nav J_TWidget scroller-nav" data-widget-type="Accordion" data-widget-config="{'triggerCls':'tab-panel','panelCls':'tab-panel-go','triggerType':'mouse'}"> <li class="tab-panel" style="list-style:none;float:left;width:300px;margin:0px 0 0 0; height:110px;overflow: hidden;"> <span class="tab-panel-go" style="display:block;background: #FFF;float:left;width:298px; height:108px;border: 1px solid #a888c1" > <a href="http://item.taobao.com/item.htm?id=17503642751" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img01.taobaocdn.com/bao/uploaded/i1/14322024077293692/T1eTJfFoxgXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:4px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:178px; height:108px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=17503642751" target="_blank" >成人模板 成人用品店铺装修模板 专业版永久使用 包安装 包审核</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">99.00</span></span> </span> </span> <span style="display:block;background: #FFF;float:left;width:300px; height:110px;overflow: hidden;"> <a href="http://item.taobao.com/item.htm?id=17503642751" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img01.taobaocdn.com/bao/uploaded/i1/14322024077293692/T1eTJfFoxgXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:5px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:180px; height:110px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=17503642751" target="_blank" >成人模板 成人用品店铺装修模板 专业版永久使用 包安装 包审核</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">99.00</span></span> </span> </span> </li> <li class="tab-panel" style="list-style:none;float:left;width:300px;margin:10px 0 0 0; height:110px;overflow: hidden;"> <span class="tab-panel-go" style="display:none;background: #FFF;float:left;width:298px; height:108px;border: 1px solid #a888c1" > <a href="http://item.taobao.com/item.htm?id=39545513426" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img02.taobaocdn.com/bao/uploaded/i2/T1vmWrFj4hXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:4px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:178px; height:108px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=39545513426" target="_blank" >淘宝店铺装修一键安装350模板夏日清凉女装休闲模板-> B137-1</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">30.00</span></span> </span> </span> <span style="display:block;background: #FFF;float:left;width:300px; height:110px;overflow: hidden;"> <a href="http://item.taobao.com/item.htm?id=39545513426" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img02.taobaocdn.com/bao/uploaded/i2/T1vmWrFj4hXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:5px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:180px; height:110px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=39545513426" target="_blank" >淘宝店铺装修一键安装350模板夏日清凉女装休闲模板-> B137-1</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">30.00</span></span> </span> </span> </li> <li class="tab-panel" style="list-style:none;float:left;width:300px;margin:10px 0 0 0; height:110px;overflow: hidden;"> <span class="tab-panel-go" style="display:none;background: #FFF;float:left;width:298px; height:108px;border: 1px solid #a888c1" > <a href="http://item.taobao.com/item.htm?id=39516211889" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img01.taobaocdn.com/bao/uploaded/i1/T1yzaGFkxdXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:4px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:178px; height:108px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=39516211889" target="_blank" >淘宝店铺装修一键安装350模板女装新格调全套装修模板-> B127-1</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">30.00</span></span> </span> </span> <span style="display:block;background: #FFF;float:left;width:300px; height:110px;overflow: hidden;"> <a href="http://item.taobao.com/item.htm?id=39516211889" style="text-decoration:none;display:block;width:100px;height:100px; background:url(http://img01.taobaocdn.com/bao/uploaded/i1/T1yzaGFkxdXXXXXXXX_!!0-item_pic.jpg_100x100.jpg) center center no-repeat;overflow:hidden;float:right;margin:5px 10px;" target="_blank" > </a> <span style=" display:block; float:left;width:180px; height:110px;"> <a style="display:block; height:40px;line-height:20px; overflow:hidden;margin:20px 10px 0 20px;text-decoration: none;color:#646464" href="http://item.taobao.com/item.htm?id=39516211889" target="_blank" >淘宝店铺装修一键安装350模板女装新格调全套装修模板-> B127-1</a> <span style="display:block;margin:10px 10px 0 20px; font-size: 14px;font-family:Arial;">¥ <span style="font-size: 18px;;color: #914bc7">30.00</span></span> </span> </span> </li> </ul> </div> </div></div><a name="sgmb"></a> 代码下载:特效代码.rar |