手机端左右滑动 

<!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>

 

posted @ 2017-06-12 13:52  工作笔记_chen  阅读(496)  评论(0)    收藏  举报