由渔舟制做的个性化的淘宝网店MV歌曲播放器代码，实际效果浏览详细地址：http://yijohn.taobao.com/p/show.htm
构思：这儿仍然使用的是Carousel滚屏实际效果制做的具体内容，只不过是这儿把图换为了淘宝视频，加上CSS3实际效果，就能够完成酷炫的播放软件实际效果了。
这一仅作学习研究，不推荐放进店面中。
温馨提醒：渔舟发过编码均为效能型编码，切勿立即套入。 这一编码必须一定的基本知识才能够运用。 初学者能够到“渔舟教室里”学习培训相关内容。
废话不多说，上编码。
<div style=" height:400px;"> <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:-325px; overflow:hidden;"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou01','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'delay':0,'duration':0.5}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou02','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.5}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou03','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.52}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou04','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.54}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou05','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.56}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou06','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.58}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou07','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.6}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou08','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.62}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou09','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.64}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou10','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.66}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou11','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.68}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou12','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.7}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou13','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.72}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou14','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.74}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou15','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.76}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou16','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.78}"> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou01" style="width:100px; height:593px;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) 0 0 no-repeat;"> <!--透明图连接蒙版--> <a href="http://item.taobao.com/item.htm?spm=a1z10.3.w4002-3822422589.77.apC69l&id=20063138080" target="_blank" class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:0; left:0; background:url(https://img-1.tkgame.com/taozhijia/2022/07/12/https://www.taozhijia.com/wp-content/uploads/2022/09/1664238339-20220927002539-63324303deba6.gif) repeat; display:block; z-index:3;"></a> <!--//透明图连接蒙版 end--> <!--短视频预告片--> <!-- <div class="footer-more-trigger" style="width:656px; height:369px; border:5px solid #fff; border-radius:5px; box-shadow:0 0 20px #B87A1E; padding:0; top:0; left:467px; z-index:5; margin-top:20px;"> <embed src="[flash]http://vodcdn.video.taobao.com/player/ugc/tb_mainpic_player_loader.swf?version=1.0.20131030.2&vid=10930961&uid=41251343&p=1&t=1&rid=&random=6666"[/flash] quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="656" height="369" wmode="transparent"></embed> </div> --> <!--//短视频预告片 end--> <!--bannermaker--> <div class="footer-more-trigger" style="width:950px; height:593px; border:0; padding:0; top:0; left:325px; z-index:2;"> <embed src="[flash]http://img1.tbcdn.cn/tfscom/T16yTGFedeXXXtxVjX.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="593" wmode="transparent"></embed> </div> <!--//bannermaker end--> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;"> </li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou02" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou03" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou04" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou05" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou06" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou07" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou08" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou09" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou10" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou11" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou12" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou13" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou14" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou15" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou16" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> </ul> </div> <ul class="nv_yuzhou" style="display:none;"> <li></li> <li></li> </ul> <!-- 左右页按键 --> <div class="footer-more-trigger prev_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:275px; top:420px; z-index:10; cursor:pointer; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) 0 0 transparent;"></div> <div class="footer-more-trigger next_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:1275px; top:420px; z-index:10; cursor:pointer;background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) -50px 0 transparent;"></div> <!-- //左右页按键 end --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--播放软件--> <div class="J_TWidget footer-more-trigger" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_yuzhou1219','navCls':'nav_yuzhou1219','autoplay':true,'activeIndex':1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'duration':0.1}" style="width:300px; height:338px; border:0; padding:0; top:20px; left:325px; z-index:19;"> <div style="display:none;"> <ul class="content_yuzhou1219"> <li style="width:950px; height:10px;"></li> </ul> </div> <ul class="nav_yuzhou1219"> <li> <!--播放软件内部结构具体内容--> <div class="J_TWidget footer-more-trigger player_yz" data-widget-type="Carousel" data-widget-config="{'contentCls':'content_player_yz','navCls':'nav_player_yz','autoplay':false,'effect':'none','activeTriggerCls':'active_player_yz','triggerType':'click'}" style="width:300px; height:338px; border:0; padding:0; top:auto; left:auto; overflow:hidden;"> <div style="height:165px;"> <ul class="content_player_yz footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:0; left:0; overflow:hidden;"> <!--let it go--> <li style="width:300px; height:165px;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-65px; left:-50px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11047481.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="285" wmode="transparent"></embed> </div> </div> </li> <!--//let it go end--> <!--御龙吟--> <li style="width:300px; height:165px; display:none;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029915.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed> </div> </div> </li> <!--//御龙吟 end--> <!--随意--> <li style="width:300px; height:165px; display:none;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029340.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed> </div> </div> </li> <!--//随意 end--> </ul> </div> <ul class="nav_player_yz"> <li class="no_active active_player_yz" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：Let it go</span><span style="color:#999; padding-left:10px;">影片《魔雪奇缘》主题歌</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌星：Demi Lovato</div> </li> <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：御龙吟</span><span style="color:#999; padding-left:10px;">《御龙在天》宣传策划MV</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌星：殷瑜琼</div> </li> <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：随意</span><span style="color:#999; padding-left:10px;">2005绸缎之行演奏会</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">弹奏：女子十二乐坊</div> </li> </ul> <div style="width:278px; height:20px; background:#cf2440; line-height:20px; padding-left:22px;"><a href="http://bangpai.taobao.com/group/14799823.htm?spm=a1z10.1.w5001-3822421422.7.anEtAB&scene=taobao_shop" target="_blank" style="color:#fff;">双击鼠标短视频，按键盘“↓”键减少声音，“→”快放！！！</a></div> </div> <!--//播放软件内部结构具体内容 end--> </li> </ul> </div> </div> <!--// 播放软件 end--> </div> </div> </div>
构思：这儿仍然使用的是Carousel滚屏实际效果制做的具体内容，只不过是这儿把图换为了淘宝视频，加上CSS3实际效果，就能够完成酷炫的播放软件实际效果了。
这一仅作学习研究，不推荐放进店面中。
温馨提醒：渔舟发过编码均为效能型编码，切勿立即套入。 这一编码必须一定的基本知识才能够运用。 初学者能够到“渔舟教室里”学习培训相关内容。
废话不多说，上编码。
<div style=" height:400px;"> <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:auto; left:-325px; overflow:hidden;"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou01','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'delay':0,'duration':0.5}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou02','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.5}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou03','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.52}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou04','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.54}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou05','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.56}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou06','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.58}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou07','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.6}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou08','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.62}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou09','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.64}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou10','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.66}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou11','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.68}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou12','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.7}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou13','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.72}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou14','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.74}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou15','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.76}"> <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'backIn','pauseOnHover':false,'contentCls':'content_yuzhou16','navCls':'nav_yuzhou','prevBtnCls':'prev_yuzhou','nextBtnCls':'next_yuzhou','autoplay':false,'interval':8,'duration':0.78}"> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou01" style="width:100px; height:593px;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) 0 0 no-repeat;"> <!--透明图连接蒙版--> <a href="http://item.taobao.com/item.htm?spm=a1z10.3.w4002-3822422589.77.apC69l&id=20063138080" target="_blank" class="footer-more-trigger" style="width:1600px; height:593px; border:0; padding:0; top:0; left:0; background:url(https://img-1.tkgame.com/taozhijia/2022/07/12/https://www.taozhijia.com/wp-content/uploads/2022/09/1664238339-20220927002539-63324303deba6.gif) repeat; display:block; z-index:3;"></a> <!--//透明图连接蒙版 end--> <!--短视频预告片--> <!-- <div class="footer-more-trigger" style="width:656px; height:369px; border:5px solid #fff; border-radius:5px; box-shadow:0 0 20px #B87A1E; padding:0; top:0; left:467px; z-index:5; margin-top:20px;"> <embed src="[flash]http://vodcdn.video.taobao.com/player/ugc/tb_mainpic_player_loader.swf?version=1.0.20131030.2&vid=10930961&uid=41251343&p=1&t=1&rid=&random=6666"[/flash] quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="656" height="369" wmode="transparent"></embed> </div> --> <!--//短视频预告片 end--> <!--bannermaker--> <div class="footer-more-trigger" style="width:950px; height:593px; border:0; padding:0; top:0; left:325px; z-index:2;"> <embed src="[flash]http://img1.tbcdn.cn/tfscom/T16yTGFedeXXXtxVjX.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="593" wmode="transparent"></embed> </div> <!--//bannermaker end--> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat 0 0;"> </li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou02" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -100px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou03" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -200px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou04" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -300px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou05" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -400px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou06" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -500px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou07" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -600px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou08" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -700px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou09" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -800px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou10" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -900px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou11" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1000px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou12" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1100px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou13" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"> </li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1200px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou14" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1300px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou15" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1400px 0;"></li> </ul> </div> <div style="width:100px; height:593px; float:left;"> <ul class="content_yuzhou16" style="width:100px; height:593px; float:left;"> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2ZUx1XB8XXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T2lfpMXyNXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> <li style="width:100px; height:593px; background:url(http://img01.taobaocdn.com/imgextra/i1/41251343/T20XFQXAJXXXXXXXXX_!!41251343.jpg) no-repeat -1500px 0;"></li> </ul> </div> <ul class="nv_yuzhou" style="display:none;"> <li></li> <li></li> </ul> <!-- 左右页按键 --> <div class="footer-more-trigger prev_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:275px; top:420px; z-index:10; cursor:pointer; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) 0 0 transparent;"></div> <div class="footer-more-trigger next_yuzhou" style="width:50px; height:50px; background:#f00; border:0; padding:0; left:1275px; top:420px; z-index:10; cursor:pointer;background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2Sq5HXs4XXXXXXXXX_!!41251343.png) -50px 0 transparent;"></div> <!-- //左右页按键 end --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--播放软件--> <div class="J_TWidget footer-more-trigger" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','contentCls':'content_yuzhou1219','navCls':'nav_yuzhou1219','autoplay':true,'activeIndex':1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'duration':0.1}" style="width:300px; height:338px; border:0; padding:0; top:20px; left:325px; z-index:19;"> <div style="display:none;"> <ul class="content_yuzhou1219"> <li style="width:950px; height:10px;"></li> </ul> </div> <ul class="nav_yuzhou1219"> <li> <!--播放软件内部结构具体内容--> <div class="J_TWidget footer-more-trigger player_yz" data-widget-type="Carousel" data-widget-config="{'contentCls':'content_player_yz','navCls':'nav_player_yz','autoplay':false,'effect':'none','activeTriggerCls':'active_player_yz','triggerType':'click'}" style="width:300px; height:338px; border:0; padding:0; top:auto; left:auto; overflow:hidden;"> <div style="height:165px;"> <ul class="content_player_yz footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:0; left:0; overflow:hidden;"> <!--let it go--> <li style="width:300px; height:165px;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-65px; left:-50px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11047481.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="285" wmode="transparent"></embed> </div> </div> </li> <!--//let it go end--> <!--御龙吟--> <li style="width:300px; height:165px; display:none;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029915.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed> </div> </div> </li> <!--//御龙吟 end--> <!--随意--> <li style="width:300px; height:165px; display:none;"> <div class="footer-more-trigger" style="width:300px; height:165px; border:0; padding:0; top:auto; left:auto;"> <div class="footer-more-trigger" style="width:380px; height:225px; border:0; padding:0; top:-45px; left:-60px;"> <embed src="[flash]http://cloud.video.taobao.com//play/u/41251343/p/1/e/1/t/7/11029340.swf[/flash]" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="255" wmode="transparent"></embed> </div> </div> </li> <!--//随意 end--> </ul> </div> <ul class="nav_player_yz"> <li class="no_active active_player_yz" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：Let it go</span><span style="color:#999; padding-left:10px;">影片《魔雪奇缘》主题歌</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌星：Demi Lovato</div> </li> <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：御龙吟</span><span style="color:#999; padding-left:10px;">《御龙在天》宣传策划MV</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">歌星：殷瑜琼</div> </li> <li class="no_active" style="width:300px; height:50px;border-bottom:1px solid #e5e5e5; color:#555;"> <div style="width:278px; height:20px; padding-left:22px; padding-top:5px; line-height:20px;"><span>歌曲名：随意</span><span style="color:#999; padding-left:10px;">2005绸缎之行演奏会</span></div> <div style="width:278px; height:20px; padding-left:22px; padding-bottom:5px; line-height:20px;">弹奏：女子十二乐坊</div> </li> </ul> <div style="width:278px; height:20px; background:#cf2440; line-height:20px; padding-left:22px;"><a href="http://bangpai.taobao.com/group/14799823.htm?spm=a1z10.1.w5001-3822421422.7.anEtAB&scene=taobao_shop" target="_blank" style="color:#fff;">双击鼠标短视频，按键盘“↓”键减少声音，“→”快放！！！</a></div> </div> <!--//播放软件内部结构具体内容 end--> </li> </ul> </div> </div> <!--// 播放软件 end--> </div> </div> </div>
