仿锋利的Jquery案例做的一个滚动切换效果,供大家参考,具体内容如下
效果如下图:
前台HTML代码如下:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动图</title> <link rel="stylesheet" type="text/css" href="css/RollControl.css" /> <script type="text/javascript" src="script/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { var page = 1; var i = 4; var $v_trends = $("#view_menu_trends").find("li"); $v_trends.eq(0).addClass('currentTrends');//默认第一个点选中 $(".next").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外围width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数 if (!$v_show.is(":animated")) { if (page == page_count) { $v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页 page = 1; } else { $v_show.animate({ left: '-=' + v_width }, 'slow'); page++; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); $(".pre").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外围width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数 if (!$v_show.is(":animated")) {//判断是否是动画状态 if (page == 1) { $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页 page = page_count; } else { $v_show.animate({ left: '+=' + v_width }, 'slow'); page--; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); }); </script> </head> <body> <div> <div id="view_menu"> <div id="view_menu_title"><span>热播电视剧</span></div> <div id="view_menu_trends"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div id="view_menu_control"> <span> <img class="pre" src="Rollpic/left_arrow.png" /></span> <span> <img class="next" src="Rollpic/right_arrow.png" /></span> </div> </div> <div id="view_content"> <div id="view_content_fixed"> <ul> <li> <div> <img src="Rollpic/1.jpg" /></div> <span></span></li> <li> <div> <img src="Rollpic/2.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/3.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/4.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/5.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/6.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/7.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/8.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/9.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/10.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/11.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/12.jpg" /> </div> <span></span></li> </ul> </div> </div> </div> </body> </html>
RollControl.css代码如下:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87body { margin: 0px; padding: 0px; } #view_menu { width: 600px; height: 30px; line-height: 30px; cursor: default; } #view_menu_title { float: left; font-family: 'Microsoft YaHei'; width: 150px; text-align: center; } #view_menu_trends { float: left; line-height: 30px; color: #99CC99; font-size: 10px; } .currentTrends { color: #009933; } #view_menu_trends ul { list-style: none; margin: 0px; padding: 0px; } #view_menu_trends ul li { text-align: center; float: left; width: 15px; } #view_menu_control { float: left; width: 100px; height: 30px; text-align: center; } #view_menu_control img { width: 25px; height: 25px; line-height: 30px; cursor: pointer; } #view_content { width: 548px; height: 178px; position: relative; overflow: hidden; border: 1px solid #CCCCCC; } #view_content_fixed { position: absolute; width: 2500px; } #view_content_fixed img { cursor: pointer; } #view_content ul { margin: 0px; position: absolute; padding: 0px; } #view_content ul li { margin: 0px; padding: 0px; float: left; padding: 8px; list-style: none; display: inline; }
.view_content_fixed下的SPAN标签是为了加标题的
效果图如下:
还有两个地方没有细化,第一个就是
这个动态点点击的时候也可以切换页面,第二个
左右切换按钮,可以添加按压效果,点击的时候取深色图片。
好了,大体的效果就这样,细节自己去玩吧,希望自己能坚持写下去,从小案例到大案例,好好学习!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最后
以上就是飘逸翅膀最近收集整理的关于基于jQuery实现滚动切换效果的全部内容,更多相关基于jQuery实现滚动切换效果内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复