怎么说呢,
今天放个轮播代码吧,韩都衣舍天猫店首页轮播,最近刚优化了下,平常可能经常加一些效果代码在上面,为了避免和一些效果代码冲突,可能啰嗦了点,需要店铺支持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>