码迷,mamicode.com
首页 > Web开发 > 详细

SlidesJS的使用

时间:2014-08-12 12:59:34      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   使用   os   io   

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

例排,先把静态html写好bubuko.com,布布扣

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

定义好CSSbubuko.com,布布扣

#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啦bubuko.com,布布扣,呵呵

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

SlidesJS的使用,布布扣,bubuko.com

SlidesJS的使用

标签:des   style   blog   http   color   使用   os   io   

原文地址:http://www.cnblogs.com/fastmover/p/3906607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!