此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了。

此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习。效果如图所示:

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="img1" onclick=""/>
  <div class="mask3" onclick="javascript:jzk.ui.moveImg(3);"></div><!-- 增加三级遮罩 -->

  <img id="img2" onclick=""/>
  <div class="mask2" onclick="javascript:jzk.ui.moveImg(2);"></div><!-- 增加二级遮罩 -->

  <img id="img3" onclick=""/>
  <div class="mask1" onclick="javascript:jzk.ui.moveImg(1);"></div><!-- 增加一级遮罩 -->

  <img id="img4" onclick=""/>

  <img id="img5" onclick=""/>
  <div class="mask5" onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- 和mask1一样效果 -->

  <img id="img6" onclick=""/>
  <div class="mask6" onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- 和mask2一样效果 -->

  <img id="img7" onclick=""/>
  <div class="mask7" onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- 和mask3一样效果 -->

  <img class="next" src="images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>
  </div>
  </body>
</html>

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代码比较难理解,上面我也给出了详细的注释,如果还有谁看了不懂的,可以在下面评论中讨论。

最新资讯
中国信通院预测 今年网络安全产业规模约1702亿

中国信通院预测 今年

我国网络安全产业规模呈现持续高速增长态势。2019年我
恒大汽车抢滩科创板:造车还需要投入多少?

恒大汽车抢滩科创板:造

,恒大的管理风格是量入为出型的,在融资渠道拓宽的情况下
苹果已阻止《堡垒之夜:拯救世界》Mac版更新

苹果已阻止《堡垒之夜

上周五,苹果公司阻止了Epic Games在macOS上的所有开发,
孙正义的“高光与至暗”

孙正义的“高光与至暗

过去半年时间里,软银集团发生了翻天覆地的变化,巨亏、业
瑞幸咖啡任命麦楷博平为独立审计方 取代安永

瑞幸咖啡任命麦楷博平

瑞幸咖啡宣布任命独立会计师事务所Marcum Bernstein &
石正丽:病毒溯源很重要,但可能永远找不到

石正丽:病毒溯源很重要

病毒溯源是一件非常重要的事,因为新冠病毒是一个新型冠
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,