利用嵌入式框架实现图片切换效果（原创）
1、嵌入式框架（iframe）可以实现在当前页面中嵌入其他页面的效果，如果结合导航超链接，就可以实现点击按钮查看图片的效果。案例效果如下：
2、案例说明：一共有5个网页文件，一个主页面文件demo5.html，4个分页文件分别是pic1.html、pic2.html、pic3.html、pic4.html。每个分页文件中只放个一个div和图片。当点击数字1时，页面跳转到pic1.html；同理，当点击数字2时，页面跳转到pic2.html。
3、制作过程如下：
主页面（demo5.html）首先通过嵌入式框架（iframe）引入第一个分页pic1.html，src属性是文件路径，name属性是框架的名字。数字超链接不仅要有链接的分页文件，还要设置目标（target）是框架的名字“m”。然后加入jQuery代码实现当点击数字超链接时，类active得到了动态的添加。demo5.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="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>
4、 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;
}
5、分页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
</div>
</body>
</html>
至此，案例制作完成。笔者想通过此案例让读者深入理解嵌入式框架的原理，并结合超链接的知识灵活运用，实现学习知识的触类旁通。赠人玫瑰，手留余香，各位一定要记得点赞与分享呀!