vue实现轮播图效果 vue实现轮播图效果

【vue实现轮播图效果】 页面效果:

文章图片

文章图片

1.html

文章图片

文章图片
2.js

文章图片

文章图片
3.css

文章图片

.fouce { position: relative; left:380px; overflow: hidden; height: 570px; width: 1100px; } .fl { float: left; } .focus{ overflow: hidden; } .fouce ul { position: absolute; } .fouce ul li { float: left; } .fouce ul li a.img { display: block; height: 520px; } .showimg{ width:1440px; left:-0px; } .showimg img { display: block; width:1100px; height:520px; } .fouce .bullet-pagination { position: absolute; bottom: 50px; } .fouce ul li h3 { height: 40px; line-height: 40px; background-color: #ededed; text-align: center; font-size: 25px; width: 1100px; } .bullet-pagination { width: 100%; text-align: center; padding-top: 16px; clear: both; overflow: hidden; } .bullet { display: inline-block; background: #fff; width: 12px; height: 12px; border-radius: 6px; -webkit-border-radius: 6px; margin-right: 5px; opacity: 0.8; -webkit-transition: opacity 0.8s linear; -moz-transition: opacity 0.8s linear; -ms-transition: opacity 0.8s linear; -o-transition: opacity 0.8s linear; transition: opacity 0.8s linear; } .bullet.active { background: #007cdb; opacity: 1; cursor: pointer; } .preNext { display: block; width: 31px; height: 41px; position: absolute; top: 200px; cursor: pointer; } .pre { background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat right center; } .next { background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat left center; right: 0px; } * { padding: 0; margin: 0; list-style: none; } a{ text-decoration: none; }

vue实现轮播图效果

推荐阅读

哪些药茶有助于降压

苹果iPhoneSE手机前置摄像头坏了的原因

刺五加籽的药用价值与功效

夏季有哪些导致头痛原因

NBA新赛季,西部哪支球队会在众强中脱颖而出呢？

时空伴随者黄码几天可以变绿码

消逝的光芒2克兰彩蛋如何触发克兰彩蛋介绍

构成国有企业渎职罪法院会如何量刑？

第二节|第二节下雨了

云南|关注！云南又一地出现感染者！

美白秘方 9个美白秘方不做黑美人

高德地图安卓2.3,高德地图连接行车记录仪完成连接

Android 手机卫士--是否有密码区分对话框类型

连云港办理出生公证需要哪些材料呢连云港办理出生公证需要哪些材料

皮皮蟹语音包在游戏里怎么用？使用方法介绍

无力诉说是什么意思词语无力诉说是什么意思

佳能白色单反有几款佳能有几款白色的

北京家庭旅馆哪家好

电力监控系统网络安全监测装置电力监控系统

赵旭李晴晴什么小说赵旭李晴晴小说完整版免费阅读最新