第九篇 bootstrap实例

 

1 bootstrap的常用样式

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    </style>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>


<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>


<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table border="1" class="table table-striped table-hover table-bordered">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                </tr>

                <tr class="success">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>销售</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>23</td>
                    <td>销售</td>
                </tr>
                <tr class="danger">
                    <td>3</td>
                    <td>王五</td>
                    <td>23</td>
                    <td>销售</td>
                </tr>
            </table>
        </div>
    </div>


    <div class="row">
        <div class="col-md-8 col-md-offset-2">


            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <hr>


            <form action="">
                <div class="form-group">

                    <label for="user">用户名</label>
                    <input type="text" class="form-control" id="user">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" class="form-control" id="pwd">
                </div>
                <div class="form-group">

                    <div class="row">
                        <div class="col-md-6">

                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2 pull-right"><input type="submit" class="form-control"></div>
                </div>
            </form>

        </div>

    </div>


    <div class="col-md-8 col-md-offset-2">
        <div class="row">
            <h3>按钮</h3>
            <button class="btn btn-danger btn-sm" disabled="disabled">button</button>
            <input  class="btn btn-warning btn-lg" type="button" value="button">
            <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;
            <span class="glyphicon glyphicon-shopping-cart"></span>
        </div>
    </div>
</div>


</body>
</html>
View Code

 

 

2 bootstrap的栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .row [class*= 'col-md-'] {
            border: 1px solid rebeccapurple;
        }
    </style>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>


<div class="container-fluid">
    <div class="row">

        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>

    </div>

    <div class="row">
        <div class="col-md-6">col-md-1</div>
        <div class="col-md-6">col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-9">col-md-1</div>
        <div class="col-md-3">col-md-1</div>
    </div>


    <div class="row">
        <div class="col-md-6 col-sm-9">col-md-6</div>
        <div class="col-md-6 col-sm-3">col-md-6</div>
    </div>

    <h3>列偏移</h3>
    <div class="row">
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>

    <h3>列嵌套</h3>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6">col-md-6</div>
                <div class="col-md-6">col-md-6</div>
            </div>
        </div>
    </div>

    <h3>列排序</h3>

    <div class="row">
        <div class="col-md-4 col-md-push-2">col-md-4</div>
    </div>

    <div class="row">
        <div class="col-md-4 col-md-push-4">col-md-4</div>
        <div class="col-md-4 col-md-pull-4">col-md-4(2)</div>
    </div>

    <div class="row">
        <div class="col-md-4 pull-right col-md-pull-2">col-md-4</div>
    </div>


</div>


</body>
</html>
View Code

 

 

3 基于bootstrap的页面

技术：导航条 ，面板，表格，分页，模态框

   

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script src="jquery3.6.js"></script>
    <script src="dist/js/bootstrap.js"></script>

    <style>

    </style>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>...</p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                </div>
                <div class="col-md-8 col-md-offset-2">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        添加员工
                    </button>
                    <p>
                    <table border="1" class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>部门</th>
                        </tr>

                        <tr class="success">
                            <td>1</td>
                            <td>张三</td>
                            <td>23</td>
                            <td>销售</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>李四</td>
                            <td>23</td>
                            <td>销售</td>
                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>王五</td>
                            <td>23</td>
                            <td>销售</td>
                        </tr>
                    </table>
                    </p>


                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">

                                    <form>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1"
                                                   placeholder="Email">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1"
                                                   placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="exampleInputFile">
                                            <p class="help-block">Example block-level help text here.</p>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Check me out
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-default">Submit</button>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary save">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <nav aria-label="Page navigation">
                        <ul class="pagination pull-right">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

        </div>
    </div>
</div>


<script>

    $(".save").click(function () {
        $('#myModal').modal('hide');
    })
</script>


</body>
</html>
View Code

 

4 表格示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.6.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

    <style>
        table td{
            width: 300px;
        }

        table tr td:first-child{
            width: 100px;
        }
        table tr td:last-child{
            width: 200px;
        }
    </style>
</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary add_btn" >
                添加员工
            </button>
            <p>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody class="tbody">
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>销售部</td>
                    <td>
                        <button class="btn btn-sm btn-danger delete_btn">删除</button>
                        <button class="btn btn-sm btn-warning edit_btn">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>23</td>
                    <td>销售部</td>
                    <td>
                       <button class="btn btn-sm btn-danger delete_btn">删除</button>
                        <button class="btn btn-sm btn-warning edit_btn">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>23</td>
                    <td>销售部</td>
                    <td>
                        <button class="btn btn-sm btn-danger delete_btn">删除</button>
                        <button class="btn btn-sm btn-warning edit_btn">编辑</button>
                    </td>
                </tr>
                </tbody>
            </table>
            </p>



            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">

                            <form>
                                    <div class="form-group">
                                        <label for="name">姓名</label>
                                        <input type="text" class="form-control" id="name"
                                               placeholder="Name">
                                    </div>
                                    <div class="form-group">
                                        <label for="age">年龄</label>
                                        <input type="text" class="form-control" id="age"
                                               placeholder="Age">
                                    </div>
                                    <div class="form-group">
                                        <label for="dep">部门</label>
                                        <select name="" class="form-control" id="dep">
                                            <option value="销售部">销售部</option>
                                            <option value="运营部">运营部</option>
                                            <option value="财务部">财务部</option>
                                        </select>
                                    </div>

                             </form>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary keep_btn">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    $(".container .add_btn").click(function () {

        $("#myModal").modal("show");

    });


    $(".keep_btn").click(function () {
        // 隐藏模态对话框
        $("#myModal").modal("hide");
        // 添加节点
        var name = $("#name").val();
        var age = $("#age").val();
        var dep = $("#dep").val();
        var num = $(".tbody").children().length+1;
        var tr = `<tr>
                    <td>${num}</td>
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${dep}</td>
                    <td>
                        <button class="btn btn-sm btn-danger delete_btn">删除</button>
                        <button class="btn btn-sm btn-warning edit_btn">编辑</button>
                    </td>
                </tr>`;

        $(".tbody").append(tr);

    });

    // 事件委派: 删除事件

    $(".tbody").on("click",".delete_btn",function () {
        $(this).parent().parent().remove();

        // 调整序号
        $(".tbody tr td:first-child").each(function (i) {
            console.log(i);
            $(this).html(i+1);
        })

    });

    // 编辑事件
    $(".tbody").on("click",".edit_btn",function () {
       // 调整标签
        $(this).html("保存").attr("class","btn btn-sm btn-success keep_btn");

        $(this).parent().siblings().each(function () {
            if($(this).index()!== 0){
                console.log($(this));
                var v = $(this).html();
                var inp = `<input type="text" value="${v}">`;
                $(this).html("");
                $(this).append(inp);
            }
        })


    });

    // 保存事件

    $(".tbody").on("click",".keep_btn",function () {
       // 调整标签的样式
        $(this).html("编辑").attr("class","btn btn-sm btn-warning edit_btn");


        $(this).parent().siblings().each(function () {
               if($(this).index()!== 0){
                  var v = $(this).children().first().val();
                  $(this).html(v);
               }

        })

    });





</script>

</body>
</html>
View Code

 

5 轮播图

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        .outer .img img{
             width: 590px;
             height: 470px;
        }

        .outer{
             width: 590px;
             height: 470px;
             margin: 100px auto;
             position: relative;
             border: 1px solid red;
        }

        .outer ul{
            list-style: none;
        }

        .outer .img li{
             position: absolute;
             top: 0;
             left: 0;
        }

        .outer .hide{
            display: none;
        }

        .outer .num{
            position: absolute;
            z-index: 100;
            bottom: 16px;
            left: 16px;

        }

        .outer .num li{
           display: inline-block;
            width: 16px;
            height: 16px;
            background-color: lightgray;
            text-align: center;
            line-height: 16px;
            border-radius: 50%;
            margin-left: 5px;
        }

        .num li.current{
            background-color: red;

        }

        .btn li{
            position: absolute;
            top:50%;
            width: 30px;
            height: 60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
            color: white;
            margin-top: -30px;
        }

        .btn .left_btn{
            left: 0;
        }

        .btn .right_btn{
            right: 0;
        }


    </style>
</head>
<body>



<div class="outer">
      <ul class="img">
            <li><a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li>
            <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt=""></a></li>
            <li class="hide"><a href=""><img src="https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt=""></a></li>
            <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt=""></a></li>
            <li class="hide"><a href=""><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt=""></a></li>
      </ul>

     <ul class="num">
         <li class="current"></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>

    <ul class="btn">
        <li class="left_btn"> < </li>
        <li class="right_btn"> > </li>
    </ul>
</div>


<script src="jquery3.6.js"></script>

<script>

    // 单击事件
    var i =0;

    $(".outer .btn .right_btn").click(go_right);

    function go_right() {

        if(i===4){
            i=-1;
        }
        i++;
        $(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".outer .num li").eq(i).addClass("current").siblings().removeClass("current");

    }

    $(".outer .btn .left_btn").click(go_left);

    function go_left() {
        if(i===0){
            i= 5;
        }
        i--;
        $(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".outer .num li").eq(i).addClass("current").siblings().removeClass("current");

    }

    // 自动轮播

    var ID = setInterval(go_right,2000);

    $(".outer").hover(function () {
        // 悬浮到outer区域
        clearInterval(ID);
    },function () {
        ID = setInterval(go_right,2000);
    });

    // 悬浮事件
    
    $(".num li").mouseover(function () {

        i = $(this).index();
        $(".outer .img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        $(".outer .num li").eq(i).addClass("current").siblings().removeClass("current")


    })
    



</script>

</body>
</html>
View Code

 

posted @ 2021-07-20 12:45  风hua  阅读(87)  评论(0)  编辑  收藏  举报