使用swipe.js做幻灯片-CFANZ编程社区

如图：

使用swipe.js做幻灯片_ide

一、在页面里引入jquery.js与swipe.js

二、页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>响应式幻灯片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script src="../js/picturefill.js"></script>
    <script src="../js/swipe.js"></script>
  </head>
  <body >
  <header id="header">
    <div class="container"> 
      <h1>Swipe</h1>
      <h2>Responsive Slide</h2>
    </div>
  </header>
  <div class="container">
    <a href="#nav" class="open toggle-btn"><i class="icon-reorder"></i></a>
    <nav id="nav">
      <ul>
        <li><a href="#" class="active">项目 1</a></li>
        <li><a href="#">项目 2</a></li>
        <li><a href="#">项目 3</a></li>
        <li><a href="#">项目 4</a></li>
        <li><a href="#">项目 5</a></li>
      </ul>
      <a href="#top" class="close toggle-btn"><i class="icon-remove-sign"></i></a>
    </nav>
    <div id="showcase">
    <!--swipe引入图片样式-->
      <div id='slider' class='swipe'>
        <div class='swipe-wrap'>
          <div><img src="../images/01.jpg" alt=""></div>
          <div><img src="../images/02.jpg" alt=""></div>
          <div><img src="../images/03.jpg" alt=""></div>
        </div>
        <div class="slider-control">
          <button class="left" onclick="mySwipe.prev()"><i class="icon-angle-left"></i></button>
          <button class="right" onclick="mySwipe.next()"><i class="icon-angle-right"></i></button>
        </div>
      </div>
       <!--swipe引入图片脚本-->
      <script>
        window.mySwipe = Swipe(document.getElementById('slider'));
      </script>
    </div>
    <article id="mainbody">
      <h3>主体</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
    </article>
    <aside id="sidebar">
      <h3>边栏</h3> 
      <p>Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. </p></aside>
  </div>
  <footer id="footer">
    <div class="container">
      <h5>© Copyright Ninghao.net</h5>
    </div>  
  </footer>
  </body>
</html>

三、CSS代码：

body{
  margin-top:35px;
  text-align:center;
  margin:0;
  padding:0;
}

img{
  width: 100%;
  max-width: 100%;
}


ul, ol {
  padding: 0;
  list-style: none;
}
h3, p{
  padding:20px;
}

.container{
  width:960px;
  margin:0 auto;
}

#header, #nav, #footer, #mainbody, #sidebar{

  line-height:25px;
  background:#eee;
  margin-bottom:20px;
  padding-bottom:20px;
  color:#999;
}

#mainbody, #sidebar{
  height:300px;
  float:left;
  margin-bottom:35px;
}

#mainbody {
  width:620px;
  /*background:#ddefcb;*/
  margin-right:20px;
}

#sidebar{
  width:320px;
  /*background:#ffcbdd;*/
}

#footer{
  clear:both;
}

#footer h5{
  padding-top:20px;
}

#footer {
  background:none;
  border-top:1px solid #eee;
}
#header{
  background:none;
  border-bottom:1px solid #eee;
}
#header h1{
  font-size:2.5em;
  margin-top:50px;
  color:#3c3c3c;
}

#header h2{
  font-size:1em;
  color:#ccc;
}

/* 导航菜单 */
ul{
  list-style: none;
  padding: 0;
}

#nav li, #nav li a{
  display: inline-block;
  padding: 7px 15px;
  text-decoration: none;
  color: #3b3b3b;
}

#nav li a:hover{
  background: #eee;
}

#nav{
  background: none;
  z-index: 9999;
}

#nav .active{
  background: #eee;
}

.toggle-btn{
  display: none;
}

#showcase{
  margin-bottom: 20px;
}

/* Swipe 幻灯片 */
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

.slider-control .left{
  position: absolute;
  left: 20px;
  top: 45%;
}

.slider-control .right{
  position: absolute;
  right: 20px;
  top: 45%;
}

.slider-control button{
  width: 50px;
  height: 50px;
  font-size: 20px;
  cursor: pointer;
  background: #000;
  color: #fff;
  border: 3px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: 0.7;
  display: none;
}

.swipe:hover button{
  display: block;
}

.slider-control button:hover{
  opacity: 0.5;
}
/* Media Queries */

@media (min-width:1200px){
  .container{
    width:1170px;
  }
  #mainbody{
    width:770px;
    margin-right:30px;
  }
  #sidebar{
    width:370px;
  }
}

@media (max-width:959px){
  .container{
    width:100%;
  }
  #mainbody{
    width:67%;
  }
  #sidebar{
    width:30%;
    float:right;
  }
}

@media (max-width: 767px){
  #mainbody, #sidebar{
    width:100%;
    float:none;
  }
  #header{
    font-size:12px;
    text-align:left;
    padding-left:20px;
  }

  /* 切换按钮 */
  .toggle-btn{
    display: inline-block;
    font-size: 25px;
    text-decoration: none;
    background: #000;
    color: #fff;
    padding: 7px 10px;
    position: absolute;
    right: 10px;
    top: 50px;
  }

  /* 隐藏关闭按钮 */
  #nav .close{
    display: none;
  }

  /* 导航为目标状态的时候显示关闭按钮 */
  #nav:target .close{
    display: inline-block;
  }

  /* 初始隐藏导航 */
  #nav{
    display: none;
  }

  /* 导航为目标状态时的样式 */
  #nav:target{
    display: block;
    position: absolute;
    top: 0;
    padding-top: 70px;
    width: 100%;
  }
  /* 目标状态下的导航的 ul 标签 */
  #nav:target ul{
    background: #000;
  }
  /* 目标状态下的导航的 li 与 a */
  #nav:target li, #nav:target li a{
    display: block;
    color: #eee;
    text-align: left;
  }
  /* 目标状态下的导航的列表下的 a 标签的悬停样式 */
  #nav:target li a:hover{
    background: #3b3b3b;
  }
  /* 目标状态下导航的激活状态的样式 */
  #nav:target .active{
    background: #272727;
  }
}