SlidesJS的使用

浏览数：21 / 时间：2015年06月09日

项目中对slideshow要求要有触屏滑动换图功能，就想到了SlidesJS这个Jquery插件

例排，先把静态html写好

<div id="cm_slides">
    <div class="s_item" style="background-image: url(img/1.jpg);" onclick="location=‘1.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
    <div class="s_item" style="background-image: url(img2.jpg);" onclick="location=‘2.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
    <div class="s_item" style="background-image: url(img/c1.jpg);" onclick="location=‘3.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
    <div class="s_item" style="background-image: url(img/4.jpg);" onclick="location=‘4.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
    <div class="s_item" style="background-image: url(img/5.jpg);" onclick="location=‘5.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
    <div class="s_item" style="background-image: url(img/c1.jpg);" onclick="location=‘6.html‘">
        <div class="slides_desc">
            <span class="slides_desc_t">标题: </span>
            <br />
            <span class="slides_desc_c">内容</span>
        </div>
    </div>
</div>

定义好CSS

#cm_slides
      {
          display: none;
          position: relative;
      }

      .slidesjs-navigation
      {
          display: none;
          margin-top: 5px;
      }



      #cm_slides .slidesjs-pagination
      {
          margin: 7px 0 0;
          float: right;
          list-style: none;
          position: absolute;
          bottom: 15px;
          right: 15px;
          z-index: 11;
      }

          #cm_slides .slidesjs-pagination li
          {
              float: left;
              margin: 0 5px;
          }

              #cm_slides .slidesjs-pagination li a
              {
                  display: block;
                  width: 12px;
                  height: 0;
                  padding-top: 13px;
                  background-image: url(img/pagination.png);
                  background-position: 0 -13px;
                  float: left;
                  overflow: hidden;
              }

                  #cm_slides .slidesjs-pagination li a.active,
                  #cm_slides .slidesjs-pagination li a:hover.active
                  {
                      background-position: 0 -26px;
                  }

      /* #cm_slides .slidesjs-pagination li a:hover
                  {
                      background-position: 0 -13px;
                  }*/
      #cm_slides .slides_desc
      {
          color: white;
          position: absolute;
          left: 258px;
          top: 105px;
          font-family: Arial;
          width: 120px;
      }

      #cm_slides .s_item
      {
          background-color: blue;
          width: 400px;
          height: 202px;
      }

      #cm_slides_title
      {
          width: 400px;
          height: 50px;
          background-color: #003366;
          color: white;
          text-align: center;
          line-height: 50px;
          font-family: Arial;
          font-size: 15px;
          font-weight: bold;
      }

      #cm_slides .slides_desc_t
      {
          font-size: 18px;
      }

      #cm_slides .slides_desc_c
      {
          font-size: 16px;
      }

现在启动slideshow啦，呵呵

<!-- SlidesJS Required: Link to jQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Link to jquery.slides.js -->
  <script src="js/jquery.slides.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
      $(function () {
          setTimeout(function () {
              $(‘#cm_slides‘).slidesjs({
                  width: 400,
                  height: 202,
                  play: {
                      active: false,
                      auto: false,
                      interval: 4000,
                      swap: true
                  }
              });
          }, 3000);
    });
  </script>