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

最新推荐文章于 2022-07-18 15:54:40 发布

chanzig

最新推荐文章于 2022-07-18 15:54:40 发布

阅读量660

点赞数

分类专栏： js 文章标签：翻页效果

本文链接：https://blog.csdn.net/chanzig/article/details/46464555

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图：

抛砖引玉，完全可以做成轮播图的效果，运用好绝对定位，和滚动加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>

chanzig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
巩固基础-类似tab的翻页效果，上一页下一页

效果图：类似tab的翻页效果，或者动画按钮 .jumbotron{ position: relative; } .jumbotron div{ text-align: center; display: none; } .d
复制链接

扫一扫

专栏目录