SlidesJS的使用

项目中对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

                  }, 
                  callback: { 
                       loaded: function (number) { 
                            //slideshow加载完成执行自定义操作 
                       }, 
                       start: function (number) { 
                            //开始划动执行自定义操作
                       }, 
                       complete: function (number) { 
                            //划动完成执行自定义操作  
                       }
                  }

              });

          }, 3000);

    });

  </script>