整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ootstrap中的輪播圖大致可以分為以下幾個部分：
圖片部分：用于展示內(nèi)容的圖片。
計數(shù)器：用于計算當前切換的圖片索引。
控制器：控制圖片的顯示對象。
1、首先我們定義一個<div>容器，這個容器用class="carousel"樣式：
<div id="carouselcontainter" class="carousel"></div>
2、輪播圖片的計數(shù)器，用于顯示圖片的播放順序。我們通常使用<li>元素，并且使用class="carousel-indicators"樣式，圖片的數(shù)量與<li>的數(shù)量一致，代碼如下：
<div id="carouselcontainter" class="carousel">
<ol class="carousel-indicators">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
3、設(shè)置輪播圖片。輪播效果主要在于輪播圖片，我們使用class="carousel-inner"樣式類控制輪播區(qū)域，并將這個輪播區(qū)放到class="carousel"容器內(nèi)，代碼如下：
4、給圖片添加文字。很多時候我們需要在圖片底部添加一些文字和鏈接，作為圖片的說明信息。我們可以使用class="carousel-caption"樣式，代碼如下：
5、控制器。有時候需要使用鼠標來控制圖片的左右滾動，我們稱之為控制器。在Bootstrap中我們只需使用carousel配合樣式left和right來實現(xiàn)。left表示向左邊滾動，right表示向右邊滾動，代碼如下：
以上是輪播圖的基本構(gòu)成，通過對上面代碼的拆分講解，讀者對其整體結(jié)構(gòu)會有一些了解。但是上面的代碼并不能真正地實現(xiàn)輪播效果，這只是輪播的一個靜態(tài)效果。頁面運行效果如圖所示。
上面講解了輪播圖的結(jié)構(gòu)，但是并沒有真正地觸發(fā)輪播圖效果。我們可以使用聲明式方式來觸發(fā)輪播圖，在使用聲明式方式的時候需要注意以下幾個data-*屬性。
data-ride：作用于class="carousel"最外層容器上，固定值data-ride="carousel"。
data-target：作用于class="carousel-indicators"的每個子元素<li>上，data-target="#class=‘carousel’外層容器的ID或者其他選擇器"。
data-slide：作用于輪播圖的控制器上，也就是控制左右滾動的<a>標簽鏈接上，可取值為“pre”、“next”，分別表示向前滾動和向后滾動。同時，href=""屬性值為class="carousel"容器的ID或者其他選擇器。
data-slide-to：用來傳遞某個幀的下標，可以用來直接跳轉(zhuǎn)到某個指定的幀，幀的下標是從0開始的，定義在<li>元素上。
data-interval：輪播圖輪換等待的事件，單位為毫秒，如果設(shè)置為false則不會自動開始輪播，默認是5000毫秒。
data-pause：如果鼠標停留在輪換圖上則停止輪播，離開后立即開始播放。
data-wrap：是否持續(xù)輪播。代碼如下：
代碼中定義了一個輪播圖效果，我們使用聲明式方式觸發(fā)輪播圖播放，頁面運行效果如圖所示
Bootstrap中的每個插件基本都支持使用JavaScript方式觸發(fā)輪播圖，輪播圖中我們使用carousel()方法來觸發(fā)播放。
$().carousel()
這是一個沒有傳遞任何參數(shù)的方法，默認情況下當插件下載完成之后是要去解析data-*屬性的，如果我們沒有指定則會指定默認的參數(shù)值。如果輪播圖中沒有指定data-ride屬性，則需要調(diào)用這個方法。
$("#carouselcontainter").carousel();
$().carousel(option)
傳遞對象參數(shù)，對象屬性如下：
interval：輪播等待的時間。
pause：鼠標在圖片上時停止播放，當鼠標移開后開始播放。
wrap：是否持續(xù)輪播。
$("#carouselcontainter").carousel({
wrap:false
});
文為兄弟連云課堂《HTML+CSS基礎(chǔ)課程》學習筆記 訂閱走一波。
第一章：Html簡介
1. Html、CSS和Javascript的關(guān)系
1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
2. 標簽初認識
1. 語法
標簽由英文尖括號<和>括起來，html中的標簽一般都是成對出現(xiàn)的，分開始標簽和結(jié)束標簽。標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。此外，HTML標簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。
2. html標簽
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標簽</title>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節(jié)公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>1234567891011121312345678910111213
這個網(wǎng)頁由一些html標簽組成：
“勇氣”是網(wǎng)頁內(nèi)容文章的標題，<h1></h1>就是標題標簽，它在網(wǎng)頁上的代碼寫成<h1>勇氣</h1>。
“三年級時…我也沒勇氣參加。” 是網(wǎng)頁中文章的段落，<p></p>是段落標簽。它在網(wǎng)頁上的代碼寫成<p>三年級時...我也沒勇氣參加。</p>
網(wǎng)頁上那張小女生的圖片，由img標簽來完成的，它在網(wǎng)頁上的代碼寫成<img src="1.jpg"。總結(jié)一下，可以這么說，網(wǎng)頁中每一個內(nèi)容在瀏覽器中的顯示，都要存放到各種標簽中。
<head>標簽：文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
<title>標簽：在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨一無二的title。
3. html文本基本結(jié)構(gòu)
一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>12341234
代碼講解：
1.<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。
2.<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、<style>、<link>、 <meta>等標簽。
3.在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標簽，在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來。
4.HTML的代碼注釋
代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。語法：<!--注釋文字 -->
TML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片等。網(wǎng)頁制作學習群：四九四零六，四九三四。
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
1、tml的固定結(jié)構(gòu)
一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。
<head>
標簽用于定義文檔的頭部，它是所有頭部元素的容器。
頭部元素有<title>、<script>、<style>、<link>、 <meta>等標簽，頭部標簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標簽，在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來。
2、<head>標簽的作用
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>標簽
在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用。網(wǎng)頁制作學習交流群，四九四零六，四九三四。
于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨
一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內(nèi)容“hello world”會在瀏覽器中的標題欄上顯示出來，
4、標簽的用途
我們學習網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網(wǎng)頁上的文章的標題就可以用標題標簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽。
文章中內(nèi)容的段落就得放在段落標簽中，在文章中有想強調(diào)的文本，就可以使
用 em 標簽表示強調(diào)等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
① 更容易被搜索引擎收錄。
②.更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
更多精彩內(nèi)容微信公眾平臺：網(wǎng)頁設(shè)計自學平臺
限時!！免費送Dreamweaver、js等前端教程
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
