利用嵌入式框架實現圖片切換效果（原創）
嵌入式框架（iframe）可以實現在當前頁面中嵌入其他頁面的效果，如果結合導航超鏈接，就可以實現點擊按鈕查看圖片的效果。案例效果如下：
案例說明：一共有5個網頁文件，一個主頁面文件demo5.html，4個分頁文件分別是pic1.html、pic2.html、pic3.html、pic4.html。每個分頁文件中只放個一個div和圖片。當點擊數字1時，頁面跳轉到pic1.html；同理，當點擊數字2時，頁面跳轉到pic2.html。
製作過程如下：
1. 主頁面（demo5.html）首先通過嵌入式框架（iframe）引入第一個分頁pic1.html，src屬性是文件路徑，name屬性是框架的名字。數字超鏈接不僅要有鏈接的分頁文件，還要設置目標（target）是框架的名字「m」。然後加入jQuery代碼實現當點擊數字超鏈接時，類active得到了動態的添加。demo5.html的代碼如下：
Advertisements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="css/fra.css" rel="stylesheet" type="text/css" />
Advertisements
</head>
<body>
<div class="pic-view">
<div class="pic-cont">
<iframe width="100%" height="100%" src="pic1.html" frameborder="0" scrolling="no" name="m">
</iframe>
</div>
<div class="pic-dh">
<a href="pic1.html" target="m">1</a>
<a href="pic2.html" target="m">2</a>
<a href="pic3.html" target="m">3</a>
<a href="pic4.html" target="m">4</a>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
$('.pic-dh a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
</body>
</html>
2. CSS樣式文件fra.css代碼如下：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
font-size:14px;
}
.pic-view{
width:520px;
height:370px;
margin: 50px auto 0px auto;
}
.pic-view .pic-cont{
width:515px;
height:335px;
}
.pic-view .pic-dh{
text-align:right;
padding-right: 20px;
margin:5px 0px 0px 0px;
}
.pic-view .pic-dh a {
color: #FFF;
text-decoration: none;
display: inline-block;
height: 20px;
width: 20px;
line-height:20px;
background-color: #333;
text-align: center;
border-radius:50%;
}
.pic-view .pic-dh .active {
background-color: #F00;
}
.pics {
}
.pics img {
border: 1px solid #CCC;
padding: 5px;
}
3.分頁pic1.html的代碼如下，其他頁面類似，只需更換圖片即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="css/fra.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pics">
<img src="images/1.jpg" width="500" height="320" />
</div>
</body>
</html>
至此，案例製作完成。筆者想通過此案例讓讀者深入理解嵌入式框架的原理，並結合超鏈接的知識靈活運用，實現學習知識的觸類旁通。贈人玫瑰，手留余香，各位一定要記得點贊與分享呀!