怎么说呢，
今天放个轮播代码吧，韩都衣舍天猫店首页轮播，最近刚优化了下，平常可能经常加一些效果代码在上面，为了避免和一些效果代码冲突，可能啰嗦了点，需要店铺支持CSS功能，喜欢的记得点个赞。

首先是CSS部分：

<style>

/*首页通用轮播*/
.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; }

</style>

 

页面代码部分：

欢迎到韩都首页参观，哈哈哈