巩固基础-类似tab的翻页效果，上一页下一页

最新推荐文章于 2023-11-24 17:20:59 发布

原创最新推荐文章于 2023-11-24 17:20:59 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#翻页效果

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架实现轮播图效果，通过CSS3和绝对定位技术，展示动态内容，并提供了一个简单的插件封装方法，简化轮播图的创建过程。

效果图：

抛砖引玉，完全可以做成轮播图的效果，运用好绝对定位，和滚动加css3,有时间做个插件，封装一些基本方法就ok了，没那么复杂。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 折叠面板</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </head>
  <style>
    .jumbotron{
      position: relative;
    }
    .jumbotron div{
      text-align: center;
      display: none;
    }
    .div-active{
      display: block !important;
    }
    #pre{
      position: absolute;
      left:10px;
      top:50%;
      margin-top: -10px;
      }
    #next{
      position: absolute;
      right:10px;
      top:50%;
      margin-top: -10px;
      }
  </style>

  <body class="container">
    <button id="modalbtn" class="btn btn-primary btn-lg col-md-4 col-md-offset-4" data-toggle="modal" data-target="#myModal">
       开始演示模态框
    </button>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">

            <div class="jumbotron">
              <button id="pre" class="btn btn-success">前</button>
              <button id="next" class="btn btn-success">后</button>
                    <div class='div-active'>Part 1
                      <br>亲自试一试 1
                      <br>亲自试一试 1
                      <br>亲自试一试 1
                      <br>亲自试一试 1</div>
                    <div>Part 2
                      <br>亲自试一试 2
                      <br>亲自试一试 2
                      <br>亲自试一试 2
                      <br>亲自试一试 2</div>
                    <div>Part 3
                      <br>亲自试一试 3
                      <br>亲自试一试 3
                      <br>亲自试一试 3
                      <br>亲自试一试 3</div>
                    <div>Part 4
                      <br>亲自试一试 4
                      <br>亲自试一试 4
                      <br>亲自试一试 4
                      <br>亲自试一试 4</div>
            </div><!-- /.end jumb -->

          </div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal -->


    <script>
      $(function () {
        $('#modalbtn').click(function(){
            $('.jumbotron div').first().addClass("div-active").siblings().removeClass("div-active");
            if($('.jumbotron div').first().hasClass('div-active')){
                  $('#pre').hide();
            }
        });
        $('#pre').hide();

        $('#next').click(function(){
            $('#pre').show();
            $('.div-active').next().addClass("div-active").siblings().removeClass("div-active");
        })

        $('#pre').click(function(){

          $('.div-active').prev().addClass("div-active").siblings().removeClass("div-active");
          if($('.jumbotron div').first().hasClass('div-active')){
                  $('#pre').hide();
                  return false;
            }

        })
      })
    </script>
  </body>

</html>