1+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+ < html xmlns ="http://www.w3.org/1999/xhtml ">
3+ < head >
4+ < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />
5+ < title > </ title >
6+ < link href ="style.css " rel ="stylesheet " type ="text/css " />
7+ < script src ="../../scripts/jquery.js " type ="text/javascript "> </ script >
8+
9+ <!--JS部分 -->
10+ < script type ="text/javascript ">
11+ $ ( document ) . ready ( function ( ) {
12+ var page = 1 ;
13+ var i = 4 ; // 每版4个图片
14+ $ ( "span.next" ) . click ( function ( ) {
15+ var $parent = $ ( this ) . parents ( "div.v_show" ) ;
16+ var $v_show = $parent . find ( "div.v_content_list" ) ; // 视频内容展示区
17+ var $v_content = $parent . find ( "div.v_content" ) ; // 视频内容展示区的外围div
18+
19+ var v_width = $v_content . width ( ) ;
20+ var len = $v_show . find ( "li" ) . length ; // 总的视频图片数
21+ var page_count = Math . ceil ( len / i ) ;
22+
23+ if ( ! $v_show . is ( ":animated" ) ) {
24+
25+ if ( page == page_count ) {
26+ $v_show . animate ( { left :'0px' } , "slow" ) ;
27+
28+ page = 1 ;
29+ } else {
30+ $v_show . animate ( { left :'-=' + v_width } , "slow" ) ;
31+ page ++ ;
32+ }
33+ $parent . find ( "span" ) . eq ( ( page - 1 ) ) . addClass ( "current" ) . siblings ( ) . removeClass ( "current" ) ;
34+ }
35+
36+
37+
38+ } ) ;
39+
40+ // 向前按钮
41+ $ ( "span.prev" ) . click ( function ( ) {
42+ var $parent = $ ( this ) . parents ( "div.v_show" ) ;
43+
44+ var $v_show = $parent . find ( "div.v_content_list" ) ; // 视频展示区
45+
46+ var $v_content = $parent . find ( "div.v_content" ) ;
47+
48+ var v_width = $v_content . width ( ) ;
49+ var len = $v_show . find ( "li" ) . length ; // 总的视频图片数
50+
51+ var page_count = Math . ceil ( len / i ) ;
52+ if ( ! $v_show . is ( ":animated" ) ) {
53+
54+ if ( page == page_count ) {
55+ $v_show . animate ( { left :'0px' } , "slow" ) ;
56+ page = 1 ;
57+ } else {
58+ $v_show . animate ( { left :'-=' + v_width } , "slow" ) ;
59+ page ++ ;
60+ }
61+ $parent . find ( "span" ) . eq ( ( page - 1 ) ) . addClass ( "current" ) . siblings ( ) . removeClass ( "current" ) ;
62+ }
63+
64+ } )
65+
66+ } )
67+
68+ </ script >
69+
70+
71+
72+
73+ </ head >
74+ < body >
75+
76+ < div class ="v_show ">
77+ < div class ="v_caption ">
78+ < h2 class ="cartoon " title ="卡通动漫 "> 卡通动漫</ h2 >
79+ < div class ="highlight_tip ">
80+ < span class ="current "> 1</ span > < span > 2</ span > < span > 3</ span > < span > 4</ span >
81+ </ div >
82+ < div class ="change_btn ">
83+ < span class ="prev " > 上一页</ span >
84+ < span class ="next "> 下一页</ span >
85+ </ div >
86+ < em > < a href ="# "> 更多> > </ a > </ em >
87+ </ div >
88+ < div class ="v_content ">
89+ < div class ="v_content_list ">
90+ < ul >
91+ < li > < a href ="# "> < img src ="img/01.jpg " alt ="海贼王 " /> </ a > < h4 > < a href ="# "> 海贼王</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
92+ < li > < a href ="# "> < img src ="img/01.jpg " alt ="海贼王 " /> </ a > < h4 > < a href ="# "> 海贼王</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
93+ < li > < a href ="# "> < img src ="img/01.jpg " alt ="海贼王 " /> </ a > < h4 > < a href ="# "> 海贼王</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
94+ < li > < a href ="# "> < img src ="img/01.jpg " alt ="海贼王 " /> </ a > < h4 > < a href ="# "> 海贼王</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
95+ < li > < a href ="# "> < img src ="img/02.jpg " alt ="哆啦A梦 " /> </ a > < h4 > < a href ="# "> 哆啦A梦</ a > </ h4 > < span > 播放:< em > 33,326</ em > </ span > </ li >
96+ < li > < a href ="# "> < img src ="img/02.jpg " alt ="哆啦A梦 " /> </ a > < h4 > < a href ="# "> 哆啦A梦</ a > </ h4 > < span > 播放:< em > 33,326</ em > </ span > </ li >
97+ < li > < a href ="# "> < img src ="img/02.jpg " alt ="哆啦A梦 " /> </ a > < h4 > < a href ="# "> 哆啦A梦</ a > </ h4 > < span > 播放:< em > 33,326</ em > </ span > </ li >
98+ < li > < a href ="# "> < img src ="img/02.jpg " alt ="哆啦A梦 " /> </ a > < h4 > < a href ="# "> 哆啦A梦</ a > </ h4 > < span > 播放:< em > 33,326</ em > </ span > </ li >
99+ < li > < a href ="# "> < img src ="img/03.jpg " alt ="火影忍者 " /> </ a > < h4 > < a href ="# "> 火影忍者</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
100+ < li > < a href ="# "> < img src ="img/03.jpg " alt ="火影忍者 " /> </ a > < h4 > < a href ="# "> 火影忍者</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
101+ < li > < a href ="# "> < img src ="img/03.jpg " alt ="火影忍者 " /> </ a > < h4 > < a href ="# "> 火影忍者</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
102+ < li > < a href ="# "> < img src ="img/03.jpg " alt ="火影忍者 " /> </ a > < h4 > < a href ="# "> 火影忍者</ a > </ h4 > < span > 播放:< em > 28,276</ em > </ span > </ li >
103+ < li > < a href ="# "> < img src ="img/04.jpg " alt ="龙珠 " /> </ a > < h4 > < a href ="# "> 龙珠</ a > </ h4 > < span > 播放 < em > 57,865</ em > </ span > </ li >
104+ < li > < a href ="# "> < img src ="img/04.jpg " alt ="龙珠 " /> </ a > < h4 > < a href ="# "> 龙珠</ a > </ h4 > < span > 播放 < em > 57,865</ em > </ span > </ li >
105+ < li > < a href ="# "> < img src ="img/04.jpg " alt ="龙珠 " /> </ a > < h4 > < a href ="# "> 龙珠</ a > </ h4 > < span > 播放 < em > 57,865</ em > </ span > </ li >
106+ < li > < a href ="# "> < img src ="img/04.jpg " alt ="龙珠 " /> </ a > < h4 > < a href ="# "> 龙珠</ a > </ h4 > < span > 播放 < em > 57,865</ em > </ span > </ li >
107+ </ ul >
108+ </ div >
109+ </ div >
110+ </ div >
111+
112+ </ body >
113+ </ html >
0 commit comments