不要滥用插件，不要去网上随便下载插件
实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; } .header{ width:100%; height: 400px; background: red; } /*swiper*/ .swiper-container { width: 800px; height:500px; position: relative; } .swiper-slide { text-align: center; font-size: 18px; /*background: pink;*/ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper_wrap{ width:100%; height: 100%; /*overflow: hidden;*/ } .oimgparn>img{ display: block; width: 100%; } .sweiper_button1{ position: absolute; z-index: 888; top:220px; left:0; width: 40px; height: 80px; background: blue; } </style> </head> <body> <div class="header"></div> <!--swiper--> <div class="swiper-container"> <div class="swiper-wrapper swiper_wrap"> <div class="swiper-slide oimgparn"> <img src="img/1.jpg"/> </div> <div class="swiper-slide oimgparn"> <img src="img/2.jpg"/> </div> <div class="swiper-slide oimgparn"> <img src="img/3.jpg"/> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next sweiper_button1"> <span>></span> </div> <div class="swiper-button-prev sweiper_button2"> </div> </div> <div id="" style="width:100%;height: 1000px;background: #ccc;"> </div> </body> <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, autoplay: { delay: 200, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </html>