淘寶全屏的輪播代碼是怎么做的?
淘寶首頁寬屏圖片輪播代碼
我有代碼,如果不是學網頁的,我怕你看不懂!
<!doctypehtml>
<html>
<head>
<metachart="utf-8">
<title>jQuery圖片輪播代碼</title>
<style>
.flexslider{
margin:0pxauto20px;
position:relative;
width:100%;
height:482px;
overflow:hidden;
zoom:1;
}
.flexslider.slidesli{
width:100%;
height:100%;
}
.flex-direction-nava{
width:70px;
height:70px;
line-height:99em;
overflow:hidden;
margin:-35px00;
display:block;
background:url(images/ad_ctr.png)no-repeat;
position:absolute;
top:50%;
z-index:10;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all.3a;
border-radius:35px;
}
.flex-direction-nav.flex-next{
background-position:0-70px;
right:0;
}
.flex-direction-nav.flex-prev{
left:0;
}
.flexslider:hover.flex-next{
opacity:0.8;
filter:alpha(opacity=25);
}
.flexslider:hover.flex-prev{
opacity:0.8;
filter:alpha(opacity=25);
}
.flexslider:hover.flex-next:hover,
.flexslider:hover.flex-prev:hover{
opacity:1;
filter:alpha(opacity=50);
}
.flex-control-nav{
width:100%;
position:absolute;
bottom:10px;
text-align:center;
}
.flex-control-navli{
margin:02px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paginglia{
background:url(images/dot.png)no-repeat0-16px;
display:block;
height:16px;
overflow:hidden;
text-indent:-99em;
width:16px;
cursor:pointer;
}
.flex-control-paginglia.flex-active,
.flex-control-pagingli.activea{
background-position:00;
}
.flexslider.slidesaimg{
width:100%;
height:482px;
display:block;
}
</style>
</head>
<body>
<br/><br/><br/>
<!--輪播廣告-->
<divid="banner_tabs"class="flexslider">
<ulclass="slides">
<li>
<atitle=""target="_blank"href="#">
<imgwidth="1920"height="482"alt=""style="background:url(images/banner1.jpg)no-repeatcenter;"src="images/alpha.png">
</a>
</li>
<li>
<atitle=""href="#">
<imgwidth="1920"height="482"alt=""style="background:url(images/banner2.jpg)no-repeatcenter;"src="images/alpha.png">
</a>
</li>
<li>
<atitle=""href="#">
<imgwidth="1920"height="482"alt=""style="background:url(images/banner3.jpg)no-repeatcenter;"src="images/alpha.png">
</a>
</li>
</ul>
<ulclass="flex-direction-nav">
<li><aclass="flex-prev"href="javascript:;">Previous</a></li>
<li><aclass="flex-next"href="javascript:;">Next</a></li>
</ul>
<olid="bannerCtrl"class="flex-control-navflex-control-paging">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>2</a></li>
</ol>
</div>
<scriptsrc="js/jquery-1.10.2.min.js"></script>
<scriptsrc="js/slider.js"></script>
<scripttype="text/javascript">
$(function(){
varbannerSlider=newSlider($('#banner_tabs'),{
time:5000,
delay:400,
event:'hover',
auto:true,
mode:'fade',
controller:$('#bannerCtrl'),
activeControllerCls:'active'
});
$('#banner_tabs.flex-prev').click(function(){
bannerSlider.prev()
});
$('#banner_tabs.flex-next').click(function(){
bannerSlider.next()
});
})
</script>
</body>
</html>
求一個淘寶網店全屏輪播banner代碼 求大神賜教~~~
給你生成一段,拿代碼的話還不如自己弄套軟件,方便快捷,不用自己動手軟件自己生成。打算長期做淘寶或者美工的話建議自己弄套
<divstyle="height:480px">
<divdata-title="本代碼由瘋狂的美工裝修助手自動生成"class="TWidgst474taigyerfooter-more-triggersn-simple-logomost-footermgzxzs_qpdm"style="width:1920px;height:500px;padding:0;left:50%;top:auto;border:0pxsolidred;background:none;">
<divclass="TWidgst474taigyerfooter-more-triggersn-simple-logomost-footer"style="width:1920px;height:500px;padding:0;left:-50%;top:-0px;border:0pxsolidred;background:none;overflow:visible;;">
<divstyle="width:1920px;margin:0auto;background:url()no-repeattopcenterfixed;"><divdata-title="本代碼由瘋狂的美工裝修助手生成"class="J_TWidget"data-widget-config="{'effect':'scrollx','easing':'eaOutStrong','interval':4,'navCls':'crazy_navjkj0bfiln260','contentCls':'crazy_contentjkj0bfiln260','prevBtnCls':'mall-prevjkj0bfiln260','autoplay':true,'nextBtnCls':'mall-nextjkj0bfiln260','circular':true,'disableBtnCls':'disable','duration':2.0,'activeTriggerCls':'hidden','delay':0.1}"data-widget-type="Caroul"style="background:none;cursor:auto;display:block;z-index:30;margin:0;padding:0;border:0;left:auto;top:auto;right:auto;width:1920px;height:500px;">
<divclass="crazy_kuangjkj0bfiln260"style="background:none;cursor:auto;display:block;z-index:30;width:1920px;height:500px;margin:0;padding:0;border:0;left:0px;top:0px;right:auto;overflow:hidden;">
<divdata-title="本代碼由瘋狂的美工裝修助手生成"class="freeze-layerfooter-more-triggerfooter-moremost-footersn-simple-logocrazynav"style="background:none;cursor:auto;display:block;width:990px;height:1px;text-align:center;left:465px;top:185px;margin:0;padding:0;border:0;z-index:99;">
<divclass="J_TWidgetmall-prevjkj0bfiln260"data-widget-config="{"trigger":".mgzxzs_jkj0bfiln260","align":{"node":".mgzxzs_jkj0bfiln260","offt":[-495,0],"points":["cc","cc"]}}"data-widget-type="Popup"style="display:none;">
<divclass="mall-prevjkj0bfiln260"style="font-size:100px;cursor:pointer;">
<imgsrc="http://img03.taobaocdn.com/imgextra/i3/456989075/TB2ychobFXXXXb6XXXXXXXXXXXX-456989075.png"/>
</div>
</div>
<divclass="J_TWidgetmall-nextjkj0bfiln260"data-widget-config="{"trigger":".mgzxzs_jkj0bfiln260","align":{"node":".mgzxzs_jkj0bfiln260","offt":[495,0],"points":["cc","cc"]}}"data-widget-type="Popup"style="display:none;">
<divclass="mall-nextjkj0bfiln260"style="font-size:100px;cursor:pointer;">
<imgsrc="http://img02.taobaocdn.com/imgextra/i2/456989075/TB2oL4mbFXXXXXtXpXXXXXXXXXX-456989075.png"/>
</div>
</div>
</div>
<divstyle="height:500px;width:1920px;overflow:hidden;padding:0px;margin:0px;"class="mgzxzs_jkj0bfiln260">
<ulclass="crazy_contentjkj0bfiln260"style="z-index:30;">
<listyle="width:1920px;height:500px;display:block;"><ahref="http://jueker.taobao.com/"target="_blank"><imgsrc="http://img03.taobaocdn.com/imgextra/i3/456989075/T2Yo4BXvBXXXXXXXXX_!!456989075.jpg"/></a></li><listyle="width:1920px;height:500px;display:block;"><ahref="http://jueker.taobao.com/"target="_blank"><imgsrc="http://img01.taobaocdn.com/imgextra/i1/456989075/T2oBY2XgRXXXXXXXXX_!!456989075.jpg"/></a></li><listyle="width:1920px;height:500px;display:block;"><ahref="http://jueker.taobao.com/"target="_blank"><imgsrc="http://img04.taobaocdn.com/imgextra/i4/456989075/T2DP71XmFXXXXXXXXX_!!456989075.gif"/></a></li>
</ul></div>
<divclass="freeze-layerfooter-more-triggerfooter-moremost-footersn-simple-logo"style="background:none;cursor:auto;display:block;width:100%;height:auto;margin:0;padding:0px;border:0;top:auto;left:auto;right:auto;bottom:0px;z-index:35;">
<ulstyle="text-align:center;padding:5px;width:100%;">
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px-20px;"> </li>
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px-20px;"> </li>
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px-20px;"> </li>
</ul>
</div>
<divclass="freeze-layerfooter-more-triggerfooter-moremost-footersn-simple-logo"style="background:none;cursor:auto;display:block;width:100%;height:auto;margin:0;padding:0px;border:0;top:auto;left:auto;right:auto;bottom:0px;z-index:36;">
<ulclass="crazy_navjkj0bfiln260"style="text-align:center;padding:5px;width:100%;">
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px0px;"> </li>
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px0px;"> </li>
<listyle="display:inline-block;*display:inline;zoom:1;width:14px;cursor:pointer;padding:0px0px5px10px;background:url(http://img02.taobaocdn.com/imgextra/i2/456989075/T29r75Xp8aXXXXXXXX-456989075.png)no-repeat0px0px;"> </li>
</ul>
</div>
</div></div>
</div>
</div>
</div>
2015年淘寶專業全屏海報輪播代碼,急求
淘寶全屏海報輪播代碼是什么軟件制作的呢,
本文發布于:2023-02-28 18:59:00,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/167759321550825.html
版權聲明:本站內容均來自互聯網,僅供演示用,請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系,我們將在24小時內刪除。
本文word下載地址:淘寶全屏輪播代碼(淘寶店鋪全屏輪播代碼).doc
本文 PDF 下載地址:淘寶全屏輪播代碼(淘寶店鋪全屏輪播代碼).pdf
| 留言與評論(共有 0 條評論) |