淘宝全屏的轮播代码是怎么做的?
淘宝首页宽屏图片轮播代码
我有代码,如果不是学网页的,我怕你看不懂!
<!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,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/zhishi/a/167759321550825.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:淘宝全屏轮播代码(淘宝店铺全屏轮播代码).doc
本文 PDF 下载地址:淘宝全屏轮播代码(淘宝店铺全屏轮播代码).pdf
留言与评论(共有 0 条评论) |