需求說明
- 使用輪播圖插件佈局網頁的結構和樣式
- 圖片切換的等待時間是2秒
- 修改輪播圖的樣式，隱藏左右兩邊的控制箭頭，不過點擊左右兩側原來按鈕的位置依然可以控制圖片切換
運行效果
參考代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>美聯英語在線VIP-真人在線英語學習-美聯英語免費在線學習網站 - 美聯英語在線VIP</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body>
<!--top-->
<div class="clearfix" id="layout_toper">
<div class="container">
<div class="clearfix">
<div class="pull-left ">
<span>
<i class="glyphicon glyphicon-phone-alt"></i>
400-777-8828
</span>
<span > </span>
<a class=" ltitem " href="javascript:;" lang="101">
中文
</a>
<a class=" ltitem " href="javascript:;" lang="102">
英文
</a>
</div>
<div class="pull-right">
<a class="btn btn-danger btn-sm" href="#">免費註冊</a>
<a class="btn btn-default btn-sm" href="#" data-toggle="modal">登錄</a>
</div>
</div>
</div>
</div>
<!--焦點圖-->
<section class="carousel slide" id="shared_carousel" data-ride="carousel">
<!-- 序號 -->
<ol class="carousel-indicators">
<li class="active" data-target="#shared_carousel" data-slide-to="0"></li>
<li class="" data-target="#shared_carousel" data-slide-to="1"></li>
<li class="" data-target="#shared_carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color:#ffffff;">
<img class="img-responsive" src="image/img1.jpg" alt="...">
<div class="carousel-caption">
<span class="subject"></span>
</div>
</div>
<div class="item" style="background-color:#ffffe5;">
<img class="img-responsive" src="image/img2.jpg" alt="...">
<div class="carousel-caption">
<span class="subject"></span>
</div>
</div>
<div class="item">
<img class="img-responsive" src="image/img3.jpg" alt="...">
<div class="carousel-caption">
<span class="subject"></span>
</div>
</div>
</div>
<a class="left carousel-control " data-slide="prev" href="#shared_carousel" role="button">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control " data-slide="next" href="#shared_carousel" role="button">
<span class="sr-only">Next</span>
</a>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//兩秒鐘執行一次
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。