利用嵌入式框架实现图片切换效果（原创）

嵌入式框架（iframe）可以实现在当前页面中嵌入其他页面的效果，如果结合导航超链接，就可以实现点击按钮查看图片的效果。案例效果如下：

案例说明：一共有5个网页文件，一个主页面文件demo5.html，4个分页文件分别是pic1.html、pic2.html、pic3.html、pic4.html。每个分页文件中只放个一个div和图片。当点击数字1时，页面跳转到pic1.html；同理，当点击数字2时，页面跳转到pic2.html。

制作过程如下：主页面（demo5.html）首先通过嵌入式框架（iframe）引入第一个分页pic1.html，src属性是文件路径，name属性是框架的名字。数字超链接不仅要有链接的分页文件，还要设置目标（target）是框架的名字“m”。然后加入jQuery代码实现当点击数字超链接时，类active得到了动态的添加。demo5.html的代码如下：

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;}

分页pic1.html的代码如下，其他页面类似，只需更换图片即可。