此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习。效果如图所示:
html 代码如下所示:
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>
- 图片浏览工具制作
- </title>
- <script type="text/javascript" src="js/main.js">
- </script>
- <link rel="stylesheet" type="text/CSS" href="style/css.css">
- </head>
- <body>
- <div id="pic_browser">
- <img class="prev" src="images/prev.png" onclick="javascript:jzk.ui.moveImg(-1);"
- />
<img id="img4"onclick=""/>
css 代码如下:
此处的 mask1、2、3..... 是覆盖几张照片的一个 div,用 opacity 属性来定义透明度,可以实现一种朦胧感,让外观更加美丽。
- body {
- width: 1340px;
- height: 500px;
- background: url(.. / images / body_bg.gif) no - repeat;
- }#pic_browser {
- width: 860px;
- height: 192px;
- position: relative;
- margin: 130px 106px;
- }#pic_browser img {
- position: absolute;
- border: none;
- }
.prev {top:76px;left: 0px;}#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}#img3, .mask1 {width: 226px;height: 150px;left: 175px;top: 21px;z-index: 6;}#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}#img5, .mask5 {width: 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index: 5;}#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}.next {top:76px;right: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}.mask1, .mask5 {opacity: 0.3;}.mask2, .mask6 {opacity: 0.5;}.mask3, .mask7 {opacity: 0.7;}
js 代码如下:
- window.onload = function()
- {
- jzk.app.initImg();
- }
var imgArray = new Array();imgArray[0] = 'images/1.jpg';imgArray[1] = 'images/2.jpg';imgArray[2] = 'images/3.jpg';imgArray[3] = 'images/4.jpg';imgArray[4] = 'images/5.jpg';imgArray[5] = 'images/6.jpg';imgArray[6] = 'images/7.jpg';var base=0;
var jzk = {}; /* 定义命名空间 */
jzk.tools = {};/* 分层第一层 */
jzk.ui = {};/* 分层第二层 */jzk.ui.moveImg = function(offset){base= (base-offset); for(var i = base;i< base +7;i++)/* 定义 i 为数组下标的变量 */ {var img = document.getElementById('img'+(i-base+1));/* 保证 img 变量为 img1、img2、img3... 直到 img7 这 7 个 img 元素 */ if(i<0) /* 数组下标 i<0, 说明 offset>0,*/ {img.src =imgArray[imgArray.length+i]; } else if(i>imgArray.length-1) {img.src =imgArray[i-imgArray.length]; } else {img.src = imgArray[i]; } }}
jzk.app = {}; /* 分层第三层 */jzk.app.initImg = function()/* 初始化显示图片, 也就是调用函数 moveImg 过程:参数为 7,base 等于 - 7,i 等于 - 7,-6,-5,-4,-3,-2,-1 这 7 个值,对应的元素为 img1,img2,...img7,所以有:img1=imgArray[-7+7],img2=imgArray[-6+7]....*/{jzk.ui.moveImg(7);/* 初始参数应该设为:能显示的张数 (此处为 7);*/} 三个文件,属 js 代码比较难理解,上面我也给出了详细的注释,如果还有谁看了不懂的,可以在下面评论中讨论。
来源: http://www.phperz.com/article/17/0418/275654.html