前端swiper实现轮播图前端

1.普通的轮播图

Document - 锐客网 .swiper-container { width: 600px; height: 300px; } .swiper-wrapper .swiper-slide img{ width: 600px; height: 300px; } 文章图片文章图片文章图片

2.走马灯切换式轮播图

Swiper的走马灯切换 - 锐客网 @charset "utf-8"; /* CSS Document */ body{ margin:0; }#certify { position: relative; width: 1200px; margin: 0 auto }img{ width: 520px; height: 310px; }#certify .swiper-container { padding-bottom: 60px; }#certify.swiper-slide { width: 520px; height: 310px; background: #fff; box-shadow: 0 8px 30px #ddd; }#certify.swiper-slide img{ display:block; }#certify.swiper-slide p { line-height: 98px; padding-top: 0; text-align: center; color: #636363; font-size: 1.1em; margin: 0; box-shadow: 0 8px 30px #ddd; }#certify .swiper-pagination { width: 100%; bottom: 20px; }#certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1; }#certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid #00aadc; background-color: #fff; }.swiper-button-next, .swiper-button-prev{ width:86px; height:112px; background-size:86px 112px; margin-top:-400px; outline:none; }#certify .swiper-button-prev:hover { background-position: 0 -46px; background-size: 100% }#certify .swiper-button-next:hover { background-position: 0 -139px; background-size: 100% } 文章图片非常难得又值钱的认证证书文章图片深圳市优秀互联网企业认定证书文章图片【前端swiper实现轮播图】质量管理体系认证荣誉证书文章图片非常难得又值钱的认证证书文章图片深圳市优秀互联网企业认定证书文章图片偶继斌哥哥好好算算i

3.知识点属性（1）speed轮播图切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至切合的时间。默认是300
（2）effect轮播图切换效果，默认为slide(位移切换)，可设置为slide(普通切换，默认),fade淡入,cube方块、coverflow(3d流)、flip(3d翻转)