新版设计导航上线了,新的界面,好记的域名(5iux.cn),欢迎收藏!

韩都衣舍全屏轮播代码

代码 D. Young 791℃ 0评论

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

 
lunbo
 

首先是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>

页面代码部分:

DY点线面此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“yzm”,获取验证码。在微信里搜索“DY点线面”或者“dyartstyle”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

转载请注明:DY点线面 » 韩都衣舍全屏轮播代码

喜欢 (3)

您必须 登录 才能发表评论!