仿6间房的视频展示效果

首先我们看一下最终的页面效果

下页是基本的html文件

Code

添加样式文件

Code

jquery脚本

$(function(){
3

//为“向右箭头”添加事件
4

var page=1;
5

var i=4;
6

$("span.next").click(function(){//绑定click事件
7

var $parent = $(this).parents("div.v_show");//根据当前单击的元素获取到父元素
8

var $v_show = $parent.find("div.v_content_list");//找到“视频内容展示区域”
9

var $v_content = $parent.find("div.v_content"); //找到“视频内容展示区域”外围的div
10

var v_width = $v_content.width() ;
11

var len = $v_show.find("li").length;//总的视频图片数
12

var page_count = Math.ceil(len / i) ;//总的视频版数
13

if(!$v_show.is(":animated")){//判断“视频内容展示区”是否正在处于动画
14

if(page == page_count){//已经到最后一个版面，如果再向右，必须跳转到第1个版面
15

$v_show.animate({ left : '0px'}, "slow");//改变left值，跳转到第1个版面
16

page = 1;
17

}else{
18

$v_show.animate({left:"-="+v_width},"slow");//通过改变left值，达到每次换一个版面
19

page++;
20

}
21

}
22

$parent.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
23

});
24

//为“向左箭头”添加事件
25

var page=1;
26

var i=4;
27

$("span.prev").click(function(){//绑定click事件
28

var $parent = $(this).parents("div.v_show");//根据当前单击的元素获取到父元素
29

var $v_show = $parent.find("div.v_content_list");//找到“视频内容展示区域”
30

var $v_content = $parent.find("div.v_content"); //找到“视频内容展示区域”外围的div
31

var v_width = $v_content.width() ;
32

var len = $v_show.find("li").length;//总的视频图片数
33

var page_count = Math.ceil(len / i) ;//总的视频版数
34

if(!$v_show.is(":animated")){//判断“视频内容展示区”是否正在处于动画
35

if(page == 1){//已经到第一个版面，如果再向左，必须跳转到最后一个版面
36

$v_show.animate({ left : '-='+v_width*(page_count-1)}, "slow");
37

page = page_count;
38

}else{
39

$v_show.animate({left:"+="+v_width},"slow");
40

page--;
41

}
42

}
43

$parent.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
44

});
45

})
46

</script>
47

posted @ 2009-07-11 15:10 郭培阅读(317) 评论(0) 收藏举报

刷新页面返回顶部

仿6间房的视频展示效果

公告