<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>swiper</title>
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
<style type="text/css">
html,body{
width: 100%;
       height: 100%;
}
.swiper-container {
      width: 100%;
       height: 100%;
}  
.swiper-slide img{
width: 100%;
height: 100%;
}
</style>


</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/08.jpg"></div>
        <div class="swiper-slide"><img src="img/09.jpg"></div>
        <div class="swiper-slide"><img src="img/07.jpg"></div>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>


    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>


</body>
<script type="text/javascript" src="js/swiper-3.4.2.min.js">

</script>


<script type="text/javascript">
      
  var mySwiper = new Swiper ('.swiper-container', {
  //渐隐渐现
  //  effect : 'fade',
  //  fade: {
  //   crossFade: false,
  // },
  //立方体效果
effect : 'cube',
cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 100,
  shadowScale: 0.6
},
//折页效果
// effect : 'coverflow',
// slidesPerView: 3,
// centeredSlides: true,
// coverflow: {
//             rotate: 30,
//             stretch: 10,
//             depth: 60,
//             modifier: 2,
//             slideShadows : true
//         },
//翻转效果
// effect : 'flip',
// flip: {
//             slideShadows : true,
//             limitRotation : true,
//         },
        //添加触屏滑动
touchRatio : 0.5,
    direction: 'horizontal',//'vertical',
    loop: true,
    autoplay:1000,//间隔时间
        speed:2000,
    // 如果需要分页器
    // pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  }) ;  
  


</script>
</html>