为了账号安全,请及时绑定邮箱和手机立即绑定

设置轮播图后出现图片上下排练,切换下一张后正常显示

设置轮播图后出现图片上下排练,切换下一张后正常显示

WenSen_ 2017-12-14 19:36:27
<!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"><link rel="stylesheet" href="css/bootstrap.min.css" /><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script><script type="text/javascript" src="js/bootstrap.min.js" ></script><style>body{padding-top: 50px;}.carousel{height: 500px;background-color: #000000;}.carousel .item{height: 500px;background-color: #000000;}.carousel img{width: 100%;}@media (max-width: 768px) {    .carousel {        height: 300px;        margin-bottom: 30px;    }    .carousel .item {        height: 300px;    }    .carousel img {        min-height: 300px;    }}</style><title>Hello World</title></head><body><nav class="navbar navbar-default navbar-fixed-top">      <div>        <div>          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">            <span>Toggle navigation</span>            <span></span>            <span></span>            <span></span>          </button>          <a href="#">某管理系统</a>        </div>        <div id="navbar" class="collapse navbar-collapse">          <ul class="nav navbar-nav">            <li><a href="#">首页</a></li>            <li role="presentation">        <a id="drop4" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">          功能          <span></span>        </a>        <ul id="menu1" aria-labelledby="drop4">         <li>业务功能</li>          <li><a href="#">信息建立</a></li>          <li><a href="#">信息查询</a></li>          <li><a href="#">信息管理</a></li>          <li role="separator"></li>          <li>系统功能</li>          <li><a href="#">设置</a></li>        </ul>      </li>            <li><a href="#contact">帮助</a></li>          </ul>        </div><!--/.nav-collapse -->      </div>    </nav>        <!--轮播图开始-->        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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> <!-- Wrapper for slides --> <div role="listbox">   <div class="item active">     <img src="img/chrome-big.jpg" alt="chrome">     <div><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" target="_blank">点我下载</a></p>     </div>   </div>   <div>     <img src="img/firefox-big.jpg" alt="firefox">     <div>       <h1>Firefox</h1><p>Mozilla Firefox,中文名通常称为“火狐”或者火狐浏览器,是一个开源网页浏览器</p><p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>     </div>   </div>   <div class="item active">     <img src="img/ie-big.jpg" alt="ie">     <div><h1>IE</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" target="_blank">点我下载</a></p>     </div>   </div>   <div class="item active">     <img src="img/opera-big.jpg" alt="opera">     <div><h1>opera</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" target="_blank">点我下载</a></p>     </div>   </div>   <div class="item active">     <img src="img/safari-big.jpg" alt="safari">     <div><h1>safari</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" target="_blank">点我下载</a></p>     </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>上一页</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>下一页</span> </a></div><!--轮播图结束--></body></html>
查看完整描述

2 回答

?
平行维度

TA贡献1条经验 获得超0个赞

  1. 少了class="carousel-inner"

  2. 不是每一个轮播项目都是class="item active",后几个应该是class="item"

查看完整回答
反对 回复 2018-02-02
  • 2 回答
  • 0 关注
  • 2499 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信