全屏电视墙模块代码
效果图
C店基础版本代码图
模块尺寸：框1920px 高 560 px 单张图片尺寸为框630px 高365px
模块整体背景图http://img01.taobaocdn.com/imgextra/i1/456989075/TB2qbmDcFXXXXa7XpXXXXXXXXXX-456989075.jpg
背景固定代码 no-repeat top center fixed;
店铺版本区别在于尺寸大小，下面代码列出，可根据第一张html代码修改
<div style="height:540px"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:1920px;height:560px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:560px;padding:0;left:-1060px;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:1920px;margin:0 auto;background: url(http://img01.taobaocdn.com/imgextra/i1/456989075/TB2qbmDcFXXXXa7XpXXXXXXXXXX-456989075.jpg) no-repeat top center;"><table background="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2ZHOFcFXXXXXzXpXXXXXXXXXX-456989075.png" height="560" width="1920"> <tbody> <tr> <td> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_bMgXd-1","navCls": "mgzxzs_bMgXdA-1","effect": "scrollx","prevBtnCls":"prevbMgXd","nextBtnCls":"nextbMgXd","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:630px;height:365px;"> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_bMgXd-2","navCls": "mgzxzs_bMgXdA-2","effect": "scrollx","prevBtnCls":"prevbMgXd","nextBtnCls":"nextbMgXd","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:1200px;height:236px;"> <div style="margin: 0px; padding: 0px; left: 360px; top: 50px; width: 1200px; height: 236px; overflow: hidden; position: relative;"> <ul class="mgzxzs_bMgXd-2" style="margin: 0px; padding: 0px; width: 999999px; height: 236px; list-style-type: none; position: absolute; left: 0px;"> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图1" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图2" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图3" style="margin:0px;width:400px;" /> </li> </ul> </div> <table background="http://img02.taobaocdn.com/imgextra/i2/456989075/TB2hKWCcFXXXXaJXpXXXXXXXXXX-456989075.png" class="footer-more-trigger sn-simple-logo" height="385" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:360px;top:50px;width:1200px;height:385px;overflow:hidden;" width="1200"> <tbody> <tr> <td> <div class="footer-more-trigger sn-simple-logo" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:285px;top:11px;width:630px;height:365px;overflow:hidden;"> <ul class="mgzxzs_bMgXd-1" style="padding: 0px; width: 999999px; height: 365px; margin-left: 0px; list-style-type: none; position: absolute;"> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#2" target="_blank" > <img height="365" src="图2" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#3" target="_blank" > <img height="365" src="图3" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#1" target="_blank" > <img height="365" src="图1" style="margin:0px;width:630px;" /> </a> </li> </ul> </div> </td> </tr> </tbody> </table> <div class="footer-more-trigger sn-simple-logo" style="border:0px solid rgb(0,0,0);left:916px;top:429px;width:60px;height:30px;"> <table border="0" cellpadding="0" cellspacing="0" height="30" width="60"> <tbody> <tr> <td class="mgzxzs_bMgXdQ1 prevbMgXd" style="cursor:pointer;"height="30" width="30"> <img src="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2LaaJcFXXXXadXXXXXXXXXXXX-456989075.gif" /> </td> <td class="mgzxzs_bMgXdQ2 nextbMgXd" style="cursor:pointer;" height="30" width="30"> <img src="http://img01.taobaocdn.com/imgextra/i1/456989075/TB2nd5BcFXXXXaTXpXXXXXXXXXX-456989075.gif" /> </td> </tr> </tbody> </table> </div> <ul class="mgzxzs_bMgXdA-2" style="display:none;"> <li class="ks-switchable-trigger-internal301 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal301"> 2 </li> <li class="ks-switchable-trigger-internal301"> 3 </li> </ul> </div> <ul class="mgzxzs_bMgXdA-1" style="display:none;"> <li class="ks-switchable-trigger-internal294 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal294"> 2 </li> <li class="ks-switchable-trigger-internal294"> 3 </li> </ul> </div> </td> </tr> </tbody> </table></div> </div> </div> </div>
<div style="height:540px"> <div data-title="本代码由疯狂的美工装修助手自动生成" class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:1920px;height:560px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:560px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:1920px;margin:0 auto;background: url(http://img01.taobaocdn.com/imgextra/i1/456989075/TB2qbmDcFXXXXa7XpXXXXXXXXXX-456989075.jpg) no-repeat top center;"><table background="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2ZHOFcFXXXXXzXpXXXXXXXXXX-456989075.png" height="560" width="1920"> <tbody> <tr> <td> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_sQnKm-1","navCls": "mgzxzs_sQnKmA-1","effect": "scrollx","prevBtnCls":"prevsQnKm","nextBtnCls":"nextsQnKm","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:630px;height:365px;"> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_sQnKm-2","navCls": "mgzxzs_sQnKmA-2","effect": "scrollx","prevBtnCls":"prevsQnKm","nextBtnCls":"nextsQnKm","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:1200px;height:236px;"> <div style="margin: 0px; padding: 0px; left: 360px; top: 50px; width: 1200px; height: 236px; overflow: hidden; position: relative;"> <ul class="mgzxzs_sQnKm-2" style="margin: 0px; padding: 0px; width: 999999px; height: 236px; list-style-type: none; position: absolute; left: 0px;"> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图1" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图2" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图3" style="margin:0px;width:400px;" /> </li> </ul> </div> <table background="http://img02.taobaocdn.com/imgextra/i2/456989075/TB2hKWCcFXXXXaJXpXXXXXXXXXX-456989075.png" class="footer-more-trigger sn-simple-logo" height="385" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:360px;top:50px;width:1200px;height:385px;overflow:hidden;" width="1200"> <tbody> <tr> <td> <div class="footer-more-trigger sn-simple-logo" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:285px;top:11px;width:630px;height:365px;overflow:hidden;"> <ul class="mgzxzs_sQnKm-1" style="padding: 0px; width: 999999px; height: 365px; margin-left: 0px; list-style-type: none; position: absolute;"> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#2" target="_blank" > <img height="365" src="图2" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#3" target="_blank" > <img height="365" src="图3" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#1" target="_blank" > <img height="365" src="图1" style="margin:0px;width:630px;" /> </a> </li> </ul> </div> </td> </tr> </tbody> </table> <div class="footer-more-trigger sn-simple-logo" style="border:0px solid rgb(0,0,0);left:916px;top:429px;width:60px;height:30px;"> <table border="0" cellpadding="0" cellspacing="0" height="30" width="60"> <tbody> <tr> <td class="mgzxzs_sQnKmQ1 prevsQnKm" style="cursor:pointer;"height="30" width="30"> <img src="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2LaaJcFXXXXadXXXXXXXXXXXX-456989075.gif" /> </td> <td class="mgzxzs_sQnKmQ2 nextsQnKm" style="cursor:pointer;" height="30" width="30"> <img src="http://img01.taobaocdn.com/imgextra/i1/456989075/TB2nd5BcFXXXXaTXpXXXXXXXXXX-456989075.gif" /> </td> </tr> </tbody> </table> </div> <ul class="mgzxzs_sQnKmA-2" style="display:none;"> <li class="ks-switchable-trigger-internal301 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal301"> 2 </li> <li class="ks-switchable-trigger-internal301"> 3 </li> </ul> </div> <ul class="mgzxzs_sQnKmA-1" style="display:none;"> <li class="ks-switchable-trigger-internal294 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal294"> 2 </li> <li class="ks-switchable-trigger-internal294"> 3 </li> </ul> </div> </td> </tr> </tbody> </table></div> </div> </div> </div>
<div style="height:540px"> <div data-title="本代码由疯狂的美工装修助手自动生成" class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:1920px;height:560px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:560px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:1920px;margin:0 auto;background: url(http://img01.taobaocdn.com/imgextra/i1/456989075/TB2qbmDcFXXXXa7XpXXXXXXXXXX-456989075.jpg) no-repeat top center;"><table background="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2ZHOFcFXXXXXzXpXXXXXXXXXX-456989075.png" height="560" width="1920"> <tbody> <tr> <td> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_hTaEg-1","navCls": "mgzxzs_hTaEgA-1","effect": "scrollx","prevBtnCls":"prevhTaEg","nextBtnCls":"nexthTaEg","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:630px;height:365px;"> <div class="J_TWidget" data-widget-config="{"contentCls": "mgzxzs_hTaEg-2","navCls": "mgzxzs_hTaEgA-2","effect": "scrollx","prevBtnCls":"prevhTaEg","nextBtnCls":"nexthTaEg","autoplay": true,"circular": true,"steps":1,"easing": "backOut","interval":4,"duration":0.5}" data-widget-type="Carousel" style="width:1200px;height:236px;"> <div style="margin: 0px; padding: 0px; left: 360px; top: 50px; width: 1200px; height: 236px; overflow: hidden; position: relative;"> <ul class="mgzxzs_hTaEg-2" style="margin: 0px; padding: 0px; width: 999999px; height: 236px; list-style-type: none; position: absolute; left: 0px;"> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图1" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图2" style="margin:0px;width:400px;" /> </li> <li style="margin: 0px; padding: 0px; width: 400px; height: 236px; display: block; float: left;" class="ks-switchable-panel-internal302"> <img height="236" src="图3" style="margin:0px;width:400px;" /> </li> </ul> </div> <table background="http://img02.taobaocdn.com/imgextra/i2/456989075/TB2hKWCcFXXXXaJXpXXXXXXXXXX-456989075.png" class="footer-more-trigger sn-simple-logo" height="385" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:360px;top:50px;width:1200px;height:385px;overflow:hidden;" width="1200"> <tbody> <tr> <td> <div class="footer-more-trigger sn-simple-logo" style="margin:0px;padding:0px;border:0px solid rgb(0,0,0);left:285px;top:11px;width:630px;height:365px;overflow:hidden;"> <ul class="mgzxzs_hTaEg-1" style="padding: 0px; width: 999999px; height: 365px; margin-left: 0px; list-style-type: none; position: absolute;"> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#2" target="_blank" > <img height="365" src="图2" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#3" target="_blank" > <img height="365" src="图3" style="margin:0px;width:630px;" /> </a> </li> <li style="margin: 0px; padding: 0px; width: 630px; height: 365px; display: block; float: left;" class="ks-switchable-panel-internal295"> <a href="#1" target="_blank" > <img height="365" src="图1" style="margin:0px;width:630px;" /> </a> </li> </ul> </div> </td> </tr> </tbody> </table> <div class="footer-more-trigger sn-simple-logo" style="border:0px solid rgb(0,0,0);left:931px;top:434px;width:60px;height:30px;"> <table border="0" cellpadding="0" cellspacing="0" height="30" width="60"> <tbody> <tr> <td class="mgzxzs_hTaEgQ1 prevhTaEg" style="cursor:pointer;"height="30" width="30"> <img src="http://img04.taobaocdn.com/imgextra/i4/456989075/TB2LaaJcFXXXXadXXXXXXXXXXXX-456989075.gif" /> </td> <td class="mgzxzs_hTaEgQ2 nexthTaEg" style="cursor:pointer;" height="30" width="30"> <img src="http://img01.taobaocdn.com/imgextra/i1/456989075/TB2nd5BcFXXXXaTXpXXXXXXXXXX-456989075.gif" /> </td> </tr> </tbody> </table> </div> <ul class="mgzxzs_hTaEgA-2" style="display:none;"> <li class="ks-switchable-trigger-internal301 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal301"> 2 </li> <li class="ks-switchable-trigger-internal301"> 3 </li> </ul> </div> <ul class="mgzxzs_hTaEgA-1" style="display:none;"> <li class="ks-switchable-trigger-internal294 ks-active"> 1 </li> <li class="ks-switchable-trigger-internal294"> 2 </li> <li class="ks-switchable-trigger-internal294"> 3 </li> </ul> </div> </td> </tr> </tbody> </table></div> </div> </div> </div>
背景层滚动模块
代码C店专业版
direction="right" 向右滚动 默认向左 scrollamount="1.5" 滚动速度
<div style="height:1060px"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:1920px;height:1080px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:1920px;height:1080px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:1920px;margin:0 auto;background: url() no-repeat top center fixed;">
<div class="crazydc" style="height:1080px;width:950px;"><div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:1920px;height:1080px;padding:0px;border:none;display:block;top:0px;left:0;z-index:5;overflow:hidden;">
<marquee behavior="scroll" scrollamount="1.5" style="height:100%;width:100%;">
<div style="height:1080px;width:999999px;position:relative;left:-1920px;"><div style="background:url(滚动图) scroll center top;width:9999999px;height:999999px;"> </div></div> </marquee></div><a href="#链接的地址" target="_blank">
<div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:1920px;height:1080px;padding:0px;border:none;display:block;top:0px;left:0;z-index:15;overflow:hidden;background:url(前景图) top center no-repeat;"> </div>
</a></div></div></div> </div> </div> </div>
<div style="height:-20px"> <div data-title="本代码由疯狂的美工装修助手自动生成" class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:0px;height:0px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:0px;height:0px;padding:0;left:-100px;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:0px;margin:0 auto;background: url() no-repeat top center fixed;"><div class="crazydc" style="height:0px;width:550px;"><div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:0px;height:0px;padding:0px;border:none;display:block;top:0px;left:0;z-index:5;overflow:hidden;"><marquee behavior="scroll" scrollamount="1.5" style="height:100%;width:100%;"> <div style="height:0px;width:999999px;position:relative;left:-1920px;"><div style="background:url(滚动图) scroll center top;width:9999999px;height:999999px;"> </div></div> </marquee></div><a href="##" target="_blank"><div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:0px;height:0px;padding:0px;border:none;display:block;top:0px;left:0;z-index:15;overflow:hidden;background:url(前景图) top center no-repeat;"> </div></a></div></div></div> </div> </div> </div>
<div style="height:-20px"> <div data-title="本代码由疯狂的美工装修助手自动生成" class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer mgzxzs_qpdm" style="z-index: 1;width:0px;height:0px;padding:0;left:50%;top:auto;border:0px solid red;background:none;"> <div class="TWidgst21290taigyer footer-more-trigger sn-simple-logo most-footer" style="width:0px;height:0px;padding:0;left:-50%;top:-0px;border:0px solid red;background:none;overflow:hidden;"> <div style="width:0px;margin:0 auto;background: url() no-repeat top center fixed;"><div class="crazydc" style="height:0px;width:990px;"><div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:0px;height:0px;padding:0px;border:none;display:block;top:0px;left:0;z-index:5;overflow:hidden;"><marquee behavior="scroll" scrollamount="1.5" style="height:100%;width:100%;"> <div style="height:0px;width:999999px;position:relative;left:-1920px;"><div style="background:url(滚动图) scroll center top;width:9999999px;height:999999px;"> </div></div> </marquee></div><a href="##" target="_blank"><div class=" freeze-layer footer-more-trigger footer-more most-footer sn-simple-logo" style=" background: none; cursor: auto; display: block;width:0px;height:0px;padding:0px;border:none;display:block;top:0px;left:0;z-index:15;overflow:hidden;background:url(前景图) top center no-repeat;"> </div></a></div></div></div> </div> </div> </div>
浙公网安备 33010602011771号