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>
这里用引号包含起来的就是被选中的图片，我们现在要把他向上面滑动，因为图片都是绝对定位，下面的图片如果
向上面滑动的话，中间显示出来的那张图片就会被它给顶上去。下一步就遍历这个图片，为他添加滑动效果.

var src ;
var num;
beforeIMG.animate(j==3?{top:"-100px"}:{top:"100px"},300);

8.假设我们点击的是第一张小图：先把目前显示出来的第二张图片往上面滑动;
j==3?{top:”-100px”}:{top:”100px”},300;这句话翻译成中文的意思是
j==3吗？如果成立animate函数的参数就是{top:”-100px”}对象，否则就是{top:”100px”}对象;
那我们点击的是第一张小图，那么J就是3，beforeIMG包含的就是所有DIV里面的第三张图,这些图将
经历300毫秒的时间滑动到top:”-100px”的位置。

$.each(beforeIMG,function(i){
src=$(this).attr("src")

9.遍历beforeIMG将他们每一个的src属性值拿出来，
如”jpg/1.jpg”也就是刚刚滑动上去的那三张图的第一张.

num=parseInt(src.substring(src.lastIndexOf("/")+1,src.lastIndexOf(".jpg")))

10.src.lastIndexOf(”/”)+1 可以这样看待这一句
“jpg/1.jpg”.lastIndexOf(”/”)+1返回一个数字，这里返回的是4
因为”/”出现在第三个位置，又加了个1
substring()方法可以将字符串的一部分切出来，他接受2个参数，这两个字符串的位置，以数字0开始计数
他的第二个参数是结束字符串的位置。
lastIndexOf()方法刚好返回了substring()方法需要的参数。所以这样就讲字符串中的数字提取出来了,
parseInt()方法将提取出来的字符串转换为整数，保存在变量num里面.

num=(j==3?num+1:num-1)
num = num>;21?1:num;
num = num==0?21:num;
$(afterIMG[i]).attr("src","jpg/"+num+".jpg")
.animate({top:"0px"},300,function(){

11.j如果是3那么当前图片就要向上面移动，而我们还要将它下面冒出来的那张图定义一个src属性
当然下面出来的图是另外一张图，所以j==3,num加1如果是向下面滑动num-1,
num = num>21?1:num;因为这只有21张图，额…所以当被加到大于21的时候又跳转到1,
num = num==0?21:num;如果一直是往下翻图片的话，被减到0了那么跳转到21,
因为这里的图片都是以数字取名的。之后为下面出来图片添加滑动动画效果。
将它移动到top:”0px”的位置，刚刚函数开始的时候为第三张图添加了Class的时候他的css定义了top:”100px”

$(this).removeClass()

12.之后将这个元素原来定义的Class移除掉.

if(j==3)
$(this).after($(this).siblings("img:nth-child(2)").addClass("after").css("top",""));

13.最关键的地方，j==3的话 ，那就是往上面滑动，如何保证这个无限循环滑动就看这里了，
将滑动上去的那个图片，或者是被顶上去的那个元素插入到当前显示出来的图片的下面，
这个函数是在动画进行完毕之后才进行的，到动画进行完毕，被顶上去的图片被插入到
当前元素的下面，这个时候又添加了Class after又将CSS top取消掉，
为什么要top:’0px’这是因为animate()函数在进行动画的时候实际上是为此元素添加了行内样式的
在第四段里面有个$(this).css(”top”)!=”0px”，如果是IE6(其他版本IE没测试过)来判断着一条的时候
将其解释为$(this).css(”top”)=auto；这样点击速度过快的话,就会出现混乱。

else

14.否则向下滚动的话插入到它的前面，这样其实就是三图片在轮换位置而已，所以能无限次的循环,
很多网站的滚动新闻图片就是这样了。

$(this).before($(this).siblings("img:nth-child(2)").addClass("before").css("top",""));
var bigSrc =$("#div2 img:nth-child(2)").attr("src");
$("#big").attr("src",bigSrc);
})
})
})
 
var t =setInterval('$("#div3 img").trigger("click")',2000)

setInterval()接受两个参数：第一个是需要执行的语句或者函数，第二个则是每隔多少时间执行一次。
setInterval()可以无限次的执行一个语句或者函数，它有个兄弟方法setTimeout()，不同的是setTimeout()
它只能执行一次，用法与都是一样的。
这条语句可以让滚动一直向下走，每2秒一次，trigger()对#div3 这个元素里面的图片隔一段时间自动点击一下下。
变量t储存了右边这条语句的引用。

$("#container").hover(
                  function(){clearInterval(t)},
                  function(){t =setInterval('$("#div3 img").trigger("click")',2000)}
 )

如果鼠标进入整个包含块，第一个函数：clearInterval(t)清除掉正被纳入每2秒执行一次语句。
第二个函数：离开则继续。
查看演示:demo