** css代码： 1.css.css文件 ```css @charset "utf-8"; /* CSS Document */ body{ font:14px/24px "Microsoft YaHei","微软雅黑"; color:#494949; background-color:#fff; word-wrap:break-word;} *{ margin:0; padding:0;} ul,li{ list-style:none outside;} a{ color:#494949; text-decoration:none;} a:hover{ text-decoration:none;} .btn{ background:none; border:medium none; outline:none; cursor:pointer;} /*外层容器*/ .swiper_box{ width: 640px; height: 300px; padding: 30px 40px; background: #111; margin: 5px auto; position: relative;} /*内容*/ .swiper-container{ height: 300px; width: 640px;} .content-slide{ padding: 20px; color: #fff;} .title{ font-size: 25px; margin-bottom: 10px;} /*前进后退按钮*/ .swiper-button .btn{ width: 17px; height: 30px; background: url(../images/arrows.png) no-repeat; position: absolute; top: 50%; margin-top: -15px;} .swiper-button .prev-btn{ background-position: left top; left: 10px;} .swiper-button .next-btn{ background-position: left bottom; right: 10px;} /*分页器*/ .swiper-pagination{ width: 100%; position: absolute; left: 0; bottom:5px; text-align: center;} .swiper-pagination-switch{ display: inline-block; width: 10px; height: 10px; background: #999; margin: 0 3px; cursor: pointer;} .swiper-active-switch{ background: #fff;} ``` 2.[swiper.min.css](http://www.idangero.us/swiper/ "swiper.min.css") 文件 ** jquery文件 1. jquery.js 2.swiper.min.js ** slide.html ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>slide</title> <link rel="stylesheet" type="text/css" href="./res/css/swiper.min.css" /> <style> *{ margin:0; padding:0;} img{ width:100%; border:none;} </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://case.cdn.medlive.cn/uploadfile/2016/0310/201603101442374060.jpg" alt="测试图片多类型"> <p>图片1</p> </div> <div class="swiper-slide"> <img src="http://case.cdn.medlive.cn/uploadfile/2016/0310/201603101419088397.jpg" alt="测试图片多类型"> <p>图片2</p> </div> <div class="swiper-slide"> <img src="http://case.cdn.medlive.cn/uploadfile/2016/0311/201603111720242972.jpg" alt="测试图片多类型"> <p>图片3</p> </div> </div> </div> <div>公共部分</div> <script src="./res/js/swiper.min.js"></script> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container'{ autoplay: 3000, autoHeight: true }); </script> </body> </html> ```
