怎么说呢,
今天放个轮播代码吧,韩都衣舍天猫店首页轮播,最近刚优化了下,平常可能经常加一些效果代码在上面,为了避免和一些效果代码冲突,可能啰嗦了点,需要店铺支持CSS功能,喜欢的记得点个赞。
首先是CSS部分:
/*首页通用轮播*/
.hd_sytylb { width: 1920px; overflow: hidden; position: relative; margin-left: 465px; }
.hd_sytylb .sy_show { width: 100%; height: 100%; float: left; overflow: hidden; }
.hd_sytylb .sy_con { height: 100%; float: left; }
.hd_sytylb .sy_con .sy_li { width: 1920px; height: 100%; float: left; overflow: hidden; position: relative; }
.hd_sytylb .sy_con .sy_li .left465 { margin-left: 0; } .hd_sytylb .sy_nav { width: 1920px; height: 30px; z-index: 50; bottom: 12px; position:absolute;}
.hd_sytylb .sy_nav li { cursor: pointer; width: 124px; height: 30px; line-height: 30px; text-align: center; float: left; font-size: 12px; margin-right: 20px; font-family: arial, "microsoft yahei"; background: #333; color: #fff; }
.hd_sytylb .sy_nav li.sy_active { background: #fff; color: #000; }
.hd_sytylb .sy_arrow { width: 1920px; height: 0; left: 0; top: 50%; position:absolute; }
.hd_sytylb .sy_arrow div { width: 65px; height: 128px; position: absolute; margin-top: -64px; z-index: 99; cursor: pointer; opacity: 0.3; -webkit-opacity: 0.3; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; }
.hd_sytylb:hover .sy_arrow div { opacity: 1; -webkit-opacity: 1; }
.hd_sytylb .sy_arrow .sy_prev { background: url(https://gdp.alicdn.com/imgextra/i3/263817957/TB2H19wbXXXXXaBXpXXXXXXXXXX-263817957.png) no-repeat center top; }
.hd_sytylb .sy_arrow .sy_next { background: url(https://gdp.alicdn.com/imgextra/i4/263817957/TB2gCOCbXXXXXboXXXXXXXXXXXX-263817957.png) no-repeat center top; }
页面代码部分:
<div style="width:990px; margin:0 auto; position:relative;">
<div class="J_TWidget hd_sytylb" style="height:1000px;" data-widget-config='{"nextBtnCls":"sy_next","prevBtnCls":"sy_prev","duration":0,"interval":3,"activeTriggerCls":"sy_active","effect":"scrollx","circular": true,"navCls":"sy_nav","contentCls":"sy_con","autoplay":true}' data-widget-type="Carousel">
<div class="sy_show">
<ul class="sy_con">
<li class="sy_li"><img src="https://gdp.alicdn.com/imgextra/i4/263817957/TB2inogblLzQeBjSZFoXXc5gFXa-263817957.jpg" alt=""></li>
<li class="sy_li"><img src="https://gdp.alicdn.com/imgextra/i4/263817957/TB2inogblLzQeBjSZFoXXc5gFXa-263817957.jpg" alt=""></li>
</ul>
</div>
<ul class="sy_nav" style="left:826px;">
<li class="sy_active">标题</li>
<li>标题</li>
</ul>
<div class="sy_arrow">
<div class="sy_prev" style="left:300px;"></div>
<div class="sy_next" style="right:300px;"></div>
</div>
</div>
</div>