问答详情
源自:3-6 编程练习

原来图片可以滚动的,只是在这个页面试不出来,我还特意把代码复制出去了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Hello World</title>

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<style>

.carousel {

            height: 500px;

        }

        .carousel .item {

            height: 500px;

        }

        .carousel .item img {

            width: 100%;

        }

</style>

</head>


<body>

<div id="ad-carousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">

    <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>

    <li data-target="#ad-carousel" data-slide-to="1"></li>

    <li data-target="#ad-carousel" data-slide-to="2"></li>

  </ol>

  <div class="carousel-inner">

    <div class="item active">

      <img src=" http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="1 slide">

  <div class="container">

  <div class="carousel-caption">

   <p>11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。</p>

</div> 

  </div>

    </div>

    

       <div class="item">

      <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide">

  <div class="container">

  <div class="carousel-caption">

   <p>无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>

</div> 

  </div>

    </div>

    

     <div class="item">

      <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="1 slide">

  <div class="container">

  <div class="carousel-caption">

   <p> 有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p>

</div> 

  </div>

    </div>

</div>

    

         <a class="left carousel-control" href="#ad-carousel" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#ad-carousel" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

    </div>


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>


提问者:慕标5518689 2019-01-14 16:06

个回答

  • keepmoving0123
    2019-01-23 15:11:12

    还有css文件


  • keepmoving0123
    2019-01-23 15:10:22

    你的js文件导错了吧

    <!DOCTYPE html>


    <html>


    <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Hello World</title>


     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


    <style>


    .carousel {


                height: 500px;


            }


            .carousel .item {


                height: 500px;


            }


            .carousel .item img {


                width: 100%;


            }


    </style>


    </head>




    <body>


    <div id="ad-carousel" class="carousel slide" data-ride="carousel">


      <ol class="carousel-indicators">


        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>


        <li data-target="#ad-carousel" data-slide-to="1"></li>


        <li data-target="#ad-carousel" data-slide-to="2"></li>


      </ol>


      <div class="carousel-inner" role="listbox">


        <div class="item active">


          <img src=" http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="1 slide">



      <div class="carousel-caption">


       <p>11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。</p>


    </div> 


        </div>

        <div class="item">


          <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide">


      <div class="carousel-caption">


       <p>无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>


    </div> 


        </div>

        <div class="item">


          <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="1 slide">


      <div class="carousel-caption">


       <p> 有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。</p>


    </div> 


        </div>


    </div>


        


             <a class="left carousel-control" href="#ad-carousel" data-slide="prev">


        <span class="glyphicon glyphicon-chevron-left"></span>


      </a>


      <a class="right carousel-control" href="#ad-carousel" data-slide="next">


        <span class="glyphicon glyphicon-chevron-right"></span>


      </a>


        </div>




    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>


        <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    </body>


    </html>