mymickey

javascript照片浏览体_来自jquery

点击第一张图片可像上面滚动 点击最下面的图片可以向下滚动浏览。
先看HTML
<div id=”container”>
<div id=”div1″><img /><img src=”jpg/1.jpg” /><img /></div>
<div id=”div2″><img /><img src=”jpg/2.jpg” /><img /></div>
<div id=”div3″><img /><img src=”jpg/3.jpg” /><img /></div>
<img id=”big” src=”jpg/1.jpg” />
</div>

$(function(){
var j;

1.定义变量j

$("#container div img:last-child").addClass("after");
$("#container div img:first-child").addClass("before");
var bigSrc =$("#div2 img:nth-child(2)").attr("src");
$("#big").attr("src",bigSrc);

2.初始化的时候给定DIV里面第一张和最后一张没有src属性的img标签添加Class属性；
<div id=”div1″><img class=”before” /><img src=”jpg/1.jpg” /><img class=”after” /></div>添加完Class后的样子

img.after{top:100px} img.before{top:-100px;}

并使用中间的那张图片作为大图显示

$("#div1 img ,#div3 img").click(function(e){

3.给第一个DIV和最后一个DIV里面的IMG添加click事件;事件函数的参数e是点击的对象。

if($(this).css("top")!="0px"){return false}

4.如果这个图片的CSS的top没有达到0px则这个点击事件到这里结束，因为如果之前有一次点击滚动效果没有结束的话，再去点击他就会
造成多一次事件累计，具体请看下面。

if($(e.target).parent().attr("id")=="div1"){j=3}else{j=1}

5.$(e.target)获取对象的源目标，如果他的父元素的ID是第一个DIV那么J就赋值为3否则为1.

var beforeIMG =$(this).parent().siblings().find(“img:nth-child(2)”).add($(this));

6.找到被点击对象的父元素的兄弟元素里面包含的第二张图片，和被点击对象自身;保存在变量beforeIMG里面.

var afterIMG=$(this).parent().siblings().find("img:nth-child("+j+")")
.add($(this).parent().find("img:nth-child("+j+")"));

7.找到被点击对象父元素的兄弟元素的第j张图片，如果这个时候点击的图片是最上面的图片那么j变量的值就是1
那么afterIMG变量就包含了#div1与#div2和#div3里面的第一图片,当然他是一个数组对象，下面我们将遍历
处理这个数组对象。假设我们点击的是第一张小图片，那么j变量包含3,这里选择出来的就是当前显示出来的那张图片
的下面一张图片<div id=”div1″><img /><img src=”jpg/1.jpg” />’<img />’</div>
这里用引号包含起来的就是被选中的图片，我们现在要把他向上面滑动，因为图片都是绝对定位，下面的图片如果
向上面滑动的话，中间显示出来的那张图片就会被它给顶上去。下一步就遍历这个图片，为他添加滑动效果.
继续阅读 »