javascript以及jquery框架使用----輪播圖例項
本週主要學習了javascript技術以及jquery框架
1.javascript：簡稱JS，是一種直譯（無需編譯）指令碼語言，是一種動態型別，弱型別，基於原型語言，內建
支援型別。其直譯器被稱為javascript引擎，屬於瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在html（
標準通用標記語言下一個應用）網頁上使用，用來給html網頁增加動態功能。其語法與java類似。
2.javascript基礎語法（ECMAScript）：資料型別（var弱型別）：數值型，字串型，布林型，陣列，物件，null，undefined
運算子：算術，賦值，比較，邏輯，三目運算子
條件分支（if...else...；switch）
迴圈語句(for ，while)
標準物件（Number，String，Array，Date，Regexp，JSON）
瀏覽器物件模型（BOM）：window，navigator，screen，location，document，history
文件物件模型（DOM）：關於DOM的增刪改查
3.jquery框架：是對js的方法包裝，使開發者可以更簡易地使用js。
以下是輪播圖例項，需要引入bootstrap框架以及jquery框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <style type="text/css"> img{ width: 100%; } </style> </head> <body> <!--輪播外掛--> <div class="carousel slide" id="myCarousel"> <!--輪播指示器（）--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" ></li> <li data-target="#myCarousel" data-slide-to="2" ></li> <li data-target="#myCarousel" data-slide-to="3" ></li> </ol> <!--被輪播的元件：圖片，層--> <div class="carousel-inner"> <div class="item active"> <img src="img/p1.jpg"/> <div class="carousel-caption"> <div class="jumbotron" style="background: transparent;"> <h1>喜洋洋</h1> <p>一起看</p> </div> </div> </div> <div class="item"> <img src="img/p2.jpg"/> </div> <div class="item"> <img src="img/p3.jpg"/> </div> <div class="item"> <img src="img/p5.jpg"/> </div> </div> <!--切換控制器--> <a href="#myCarousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function(){ $('#myCarousel').carousel({ interval:5000 }) }) </script> </body> </html>