课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我没有实现图片的滚动，求大神指点？

来源：3-5 滚动图片广告

慕无忌0825444

2017-07-05 16:00

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>简历网页版</title>
    <style>
     body{
     padding:50px;
     }
      .carousel{
       height:500px;
       background-color:#000;
      }
     .carousel .item{
      height:200px;
      background-color:#000;
     }
     .carousel img{
      width:100%;
     height:200px;
     }
     .carousel .catption p{
      margin-bottom:20px;
     font-size:20px;
     line-height:1.8em;
      
     }
    </style>

    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"   role="navigation">
     
    <!-- 这里加了。navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面面上的一部分其他内容，
    除非给body元素设置padding，默认高度是50px，比如设置body{padding-top:70px}。 navbar-inverse不加的情况下是白色条框，
    加了他是黑色导航条-->
  <div><!--可以写container 让导航条自适应显示或者container-fluid居中显示-->
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#">简历</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><a href="#">基本资料<span>(current)</span></a></li>
        <li><a href="#">教育背景</a></li>
         <li><a href="#">荣誉奖励</a></li>
       <li>
            <a herf="#"class="dropdown-toggle" data-toggle="dropdown">职业技能<span></span></a>
             <ul role="menu" >
             <li><a herf="#">单片机</a></li>
             <li><a herf="#">数电模电</a></li>
             <li><a herf="#">roteus</a></li>
               <li></li>
             <li><a herf="#">HBuilder</a></li>
             </ul>
       </li>
           <li><a href="#">相关证书</a></li>
            <li><a href="#">自我评价</a></li>
             <li><a href="#">项目经验</a></li>
           
         
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div id="Carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol>
<li data-target="#Carousel-example-generic" data-slide-to="0"></li>
    <li data-target="#Carousel-example-generic" data-slide-to="1" ></li>
        <li data-target="#Carousel-example-generic" data-slide-to="2" ></li>
            <li data-target="#Carousel-example-generic" data-slide-to="3" ></li>
               <li data-target="#Carousel-example-generic" data-slide-to="4"></li>
  </ol><!--这一块是三个小小点点的图标-->
    <div role="listbox">
    <div class="item active ">
     <img src="img/cc.jpg" alt="0 slide">
     <div>
      <h1>努力</h1>
       <p>相信梦想是价值的源泉，相信眼光决定未来的一切，
        相信成功的信念比成功本身更重要，相信人生有挫折没有失败，
        相信生命的质量来自决不妥协的信念。</p>
        <p><a class="btn btn-lg btn-prmiary" href="http://www.lz13.cn/jingdianyuduan/8087.html" target="_blank" role="button">点我下载</a></p>
    </div>
    </div>
    </div>
     <img src="img/dd.jpg" alt="1 slide">
     <div>
      <h1>飞翔</h1>
       <p>我走得很慢，但我从不后退！</p>
        <p><a class="btn btn-lg btn-prmiary" href="http://www.lz13.cn/jingdianyuduan/8087.html" target="_blank" role="button">点我下载</a></p>
    </div>
    </div>
    </div>
    <img src="img/ee.jpg" alt="2 slide">
     <div>
      <h1>隐忍</h1>
       <p>流过泪的眼睛更明亮，滴过血的心灵更坚强！</p>
        <p><a class="btn btn-lg btn-prmiary" href="http://www.lz13.cn/jingdianyuduan/8087.html" target="_blank" role="button">点我下载</a></p>
</div>

</div><!--这部分是内容-->
 </div>
    <img src="img/ss.jpg" alt="3 slide">
     <div>
      <h1>隐忍</h1>
       <p>流过泪的眼睛更明亮，滴过血的心灵更坚强！</p>
        <p><a class="btn btn-lg btn-prmiary" href="http://www.lz13.cn/jingdianyuduan/8087.html" target="_blank" role="button">点我下载</a></p>
</div>

</div><!--这部分是内容-->

 </div>
    <img src="img/ggg.jpg" alt="4 slide">
     <div>
      <h1>成功</h1>
       <p>失败是什么？没有什么，只是更走近成功一步；成功是什么？就是走过了所有通向失败的路，
        只剩下一条路，那就是成功的路。</p>
        <p><a class="btn btn-lg btn-prmiary" href="http://www.lz13.cn/jingdianyuduan/8087.html" target="_blank" role="button">点我下载</a></p>
     </div>
     </div>
     </div>
  <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"</span>
<span>上一页</span>
</a>
  <a class="right carousel-control" href="#Carousel-example-generic" role="button" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
   <span>下一页</span>
</a><!--这部分是向左向右的按扭即<>-->
</div>


      <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
  </body>
</html>

http://img.mukewang.com/595c9c880001d0f411810708.jpg
写回答 关注

1回答

  • lenmer
    2017-07-07 22:54:14

    这个代码不是一点点问题啊，先来随便说几个:1.很乱；2.有的标签没有闭合；3.该用结构你没用，该用的类你没用；4.有的东西用错了。

    如果你正确引用如下格式，并仔细的把代码敲完整了，标签闭合了

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    那就应该是我这样的

    <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>
    <li data-target="#ad-carousel" data-slide-to="3"></li>
    <li data-target="#ad-carousel" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Chrome</h1>
          <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
          <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"
                          role="button" target="_blank">点我下载</a></p>
        </div>
      </div>
    </div>
    <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Firefox</h1>
          <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
          <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"
                          role="button">点我下载</a></p>
        </div>
      </div>
    </div>
    <div class="item"> <img src="images/safari-big.jpg" alt="3 slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Safari</h1>
          <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
          <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>
        </div>
      </div>
    </div>
    <div class="item"> <img src="images/opera-big.jpg" alt="4 slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Opera</h1>
          <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
          <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>
        </div>
      </div>
    </div>
    <div class="item"> <img src="images/ie-big.jpg" alt="5 slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>IE</h1>
          <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
          <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></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>

    其实最主要的问题是你的结构和代码语言的不完整，还在漏标签，应该是新手吧，要仔细一点哟！希望对你有帮助。

    0 0

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187669 学习 · 734 问题

查看课程

相似问题

为什么我我的面屏都是图片，而且，图片的上一页进和下一页的按钮不见了~跪求大神指点！

回答 3

l老师：我的图片滚动广告全屏显示正常，但是小屏不正常了，求大神解答

回答 4

导航条与滚动图片有间隙

回答 2

滚动图片不在中间

回答 2

图片滚动能做成动态吗？

回答 2

打开慕课网App查看更多内容