出色的html滑动效果库 swiper -例子5 横向自由滑动可以滑动部分

来源：互联网发布：淘宝账号名称怎么修改编辑：程序博客网时间：2024/06/06 07:46

可以用于div滑动，图片滑动等切换

例子代码以及所需资源：http://download.csdn.net/detail/feisy/6638105

官网例子：使用iframe来在同一个页面里面加入了很多各种不同的演示 http://www.idangero.us/sliders/swiper/demos.php

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Demo</title>  <link rel="stylesheet" href="css/idangerous.swiper.css">  <style>/* Demo Styles */body {  margin: 0;  font-family: Arial, Helvetica, sans-serif;  font-size: 13px;  line-height: 1.5;}.swiper-container {  width: 640px;  height: 250px;  color: #fff;  text-align: center;}.red-slide {  background: #ca4040;}.blue-slide {  background: #4390ee;}.orange-slide {  background: #ff8604;}.green-slide {  background: #49a430;}.pink-slide {  background: #973e76;}.swiper-slide .title {  font-style: italic;  font-size: 42px;  margin-top: 80px;  margin-bottom: 0;  line-height: 45px;}.swiper-slide p {  font-style: italic;  font-size: 25px;}.pagination {  position: absolute;  z-index: 20;  left: 10px;  bottom: 10px;}.swiper-pagination-switch {  display: inline-block;  width: 8px;  height: 8px;  border-radius: 8px;  background: #555;  margin-right: 5px;  opacity: 0.8;  border: 1px solid #fff;  cursor: pointer;}.swiper-active-switch {  background: #fff;}  </style></head><body>  <div class="swiper-container">    <div class="swiper-wrapper">      <div class="swiper-slide red-slide">        <div class="title">Free Mode</div>        <p>has no fixed positions</p>      </div>      <div class="swiper-slide blue-slide">        <div class="title">Fluid-Mode Enabled</div>        <p>When you release the slide, it keep moving for a while</p>      </div>      <div class="swiper-slide orange-slide">        <div class="title">Slide 3</div>        <p>Keep swiping</p>      </div>      <div class="swiper-slide green-slide">        <div class="title">Slide 4</div>        <p>Keep swiping</p>      </div>      <div class="swiper-slide pink-slide">        <div class="title">Slide 5</div>        <p>The last one</p>      </div>    </div>    <div class="pagination"></div>  </div>  <script src="js/jquery-1.10.1.min.js"></script>  <script src="js/idangerous.swiper-2.1.min.js"></script>  <script>  var mySwiper = new Swiper('.swiper-container',{    pagination: '.pagination',    paginationClickable: true,    freeMode: true,    freeModeFluid: true  })  </script></body></html>

出色的html滑动效果库 swiper -例子5 横向自由滑动 可以滑动部分

出色的html滑动效果库 swiper -例子5 横向自由滑动可以滑动部分