<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper中文网基础演示(www.swiper.com.cn)</title> <link rel="stylesheet" href="css/swiper.min.css"> <style> * { margin: 0; padding: 0; } .blue-slide { background: #4390EE; } .red-slide { background: #CA4040; } .orange-slide { background: #FF8604; } .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center; } </style> </head> <body> <!--外层大盒子--> <div class="swiper-container"> <!-- 放内容的盒子 --> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide">slider1</div> <div class="swiper-slide red-slide">slider2</div> <div class="swiper-slide orange-slide">slider3</div> </div> <!-- 装小点的盒子--> <div class="swiper-pagination"></div> <!-- 装左右箭头的盒子--> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="js/jQuery.2.4.1.min.js"></script> <script src="js/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container',{ //true 为无限滚动 false 为滚动到最后一屏时不能再滚动了 loop: true, //自动轮播 autoplay: 700, //显示小点 pagination : '.swiper-pagination', //小点可以点击 paginationClickable :true, //左右点击的箭头(样式直接在库文件里改) prevButton:'.swiper-button-prev', nextButton:'.swiper-button-next' }); //移上停止滚动，移走继续滚动 $('.swiper-container').mouseover(function(){ mySwiper.stopAutoplay(); }).mouseout(function(){ mySwiper.startAutoplay(); }) </script> </body> </html>