脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[JQuery]用InsertAfter实现图片走马灯展示效果,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 写在前面
最近一个搞美工的朋友让我给他写一个图片轮播的特效。
需求:
图片向左循环滚动。
图片滚动到中间高亮显示,并在下方显示照片人物对应的信息。
鼠标悬停止滚动。
鼠标离开开始滚动。
单击图片,图片移到中间并高亮显示。
分析
思考一
首先想到的是图片轮播的插件,找了几款,并不是太满意,就放弃了。
思考二
然后想到使用jquery的aniMATE()方法,对这个不熟悉,也放弃了。
jQuery animate() 方法用于创建自定义动画。
语法
$(selector).animate({params},sPEed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用;它把 <p> 元素移动到左边,直到 left 属性等于 250 像素为止:
实例
$("button").click(function(){
$("p").animate({left:'250px'});
});
说明:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS posITion 属性设置为 relative、fixed 或 absolute!
详细参数说明:https://www.w3school.COM.cn/jquery/jquery_animate.asp
由上可以知道animate方法对操作位移比较方便(也许对该方法了解的不够深入),而需求需要对中间高亮显示的照片并在下方显示对应人物的信息。
思考三
该方式有点类似走马灯的效果,另外想到了jquery中常用的文档操作的方法:append()、appendTo()、before()、insertAfter()、insertBefore()
而这些方法在使用时,针对元素本身是否已经存在,有不同的效果,比如动态创建的元素,使用文档操作的方法是在目标对象之前(之后)追加(插入),而对于已经存在的元素,则会出现移动的效果。
所以,想到了,每移动一个图片,将最前面的那个图片插入在最后一张图片后面,然后使用定时器不间断的移动就可以满足上面的需求了,有了这些考虑,就开始动手实践了。
实践
朋友给的css
复制代码
1 @charset "utf-8";
2 /* CSS Document */
3 *{margin:0; padding:0; list-style:none;}
4 body{margin:0; padding:0; font-family:"宋体"; font-Size:14px; color:#3c3d43; background:#e2e2d7;}
5 a:link{ text-decoration:none;}
6 /*轮播图片的样式*/
7 .teacher{width:1000px; height:250px; margin:0 auto; background:url(../imges/Jshi1.png);position:relative;}
8 .teach_top{width:120px; height:100px; float:right; background:#3b3f8c; margin-top:7px; margin-right:24px;}
9 .teach_top p{ color:#fff; font-weight:bold; text-align:center;}
10 .Teac{width:950px; height:100px; position:absolute; margin-top:50px; margin-left:30px;}
11 .Teac ul li:hover{}
12 .Teac ul li{ float:left; width:99px; height:100px; margin-left:5px; background:#000;}
13 .Zzhao img{width:100px; height:100px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtML-opacity: 0.5; opacity: 0.5; border:0; list-style:none;}
14 .Jjie{width:240px; height:60px; position:absolute; margin-top:120px; margin-left:350px;}
15 .T1{ font-family:"宋体"; font-size:20px; font-weight:bold; color:#011b12; margin-left:27px;}
16 .T2{font-family:"宋体"; font-size:12px; color:#7b7c7c;}
17 .T3{font-family:"宋体"; font-size:12px; color:#7b7c7c; text-align:center; margin-top:6px; line-height:150%;}
18 .Zzhao_cent img{width:100px; height:100px; border:0; list-style:none;}
复制代码
静态页Index.html
复制代码
1 <!DOCTYPE HTML PubLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html XMlns="https://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="Css/Style.css" rel="stylesheet" type="text/css" />
7 <script src="Script/jquery-1.10.2.js"></script>
8
9 <script type="text/javascript">
11 "id": "1",
12 "T1": "萌萌雨1",
13 "T2": "上海复旦大学硕士学位1",
14 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师1",
15 "imgsrc": "imges/teach_1.png"
16 },
17 {
18 "id": "2",
19 "T1": "萌萌雨2",
20 "T2": "上海复旦大学硕士学位2",
21 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师2",
22 "imgsrc": "imges/teach_2.png"
23
24 },
25 {
26 "id": "3",
27 "T1": "萌萌雨3",
28 "T2": "上海复旦大学硕士学位3",
29 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师3",
30 "imgsrc": "imges/teach_3.png"
31 }, {
32 "id": "4",
33 "T1": "萌萌雨4",
34 "T2": "上海复旦大学硕士学位4",
35 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师4",
36 "imgsrc": "imges/teach_4.png"
37 }, {
38 "id": "5",
39 "T1": "萌萌雨5",
40 "T2": "上海复旦大学硕士学位5",
41 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师5",
42 "imgsrc": "imges/teach_5.png"
43 }
44 , {
45 "id": "6",
46 "T1": "萌萌雨6",
47 "T2": "上海复旦大学硕士学位6",
48 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师6",
49 "imgsrc": "imges/teach_6.png"
50
51 }, {
52 "id": "7",
53 "T1": "萌萌雨7",
54 "T2": "上海复旦大学硕士学位7",
55 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师7",
56 "imgsrc": "imges/teach_7.png"
57
58 }, {
59 "id": "8",
60 "T1": "萌萌雨8",
61 "T2": "上海复旦大学硕士学位8",
62 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师8",
63 "imgsrc": "imges/teach_8.png"
64
65 }, {
66 "id": "9",
67 "T1": "萌萌雨9",
68 "T2": "上海复旦大学硕士学位9",
69 "T3": "追求完美与一身的现代化教师女性,才华横溢一表人才,优秀教师9",
70 "imgsrc": "imges/teach_9.png"
71
72 },
73 ];
74 //滚动图片对象
75 var srcollImages = {
76 //将第一个li插在最后一个ul之后
77 FirstInsertAfterLast: function () {
78 $("ul li:first").insertAfter($("ul li:last"));
79 },
80 /*
81 获得高亮显示的li
82 $result:获得高亮的li并将高亮显示的li对象返回
83 */
84 getHightLightLi: function ($container) {
85 var $lis = $("ul li", $container);
86 var $result = null;
87 $lis.each(function (index, element) {
88 if ($(this).attr("class") == "Zzhao_cent") {
89 $result = $(element);
90 $.each(Tearchers, function (index) {
91 //当前对象
92 var teacher = this;
93 if ($result.find("img").attr("src") == teacher.imgsrc) {
94 //因为索引是从0开始,为了让信息和照片对应所做的处理
95 index = index + 1;
96 //对最后一张图片的处理
97 if (index > (Tearchers.length - 1)) {
98 teacher = Tearchers[0];
99 } else {
100 teacher = Tearchers[index];
101 }
102 //将信息写入下面的span中
103 $(".T1").html(teacher.T1);
104 $(".T2").html(teacher.T2);
105 $(".T3").html(teacher.T3);
106 }
107 })
108 }
109 });
110 return $result;
111 }
112 };
113 $(function () {
114 //开启定时器
115 var timerHandl = timerScroll();
116 //鼠标悬停在li和离开li的处理,单击li后的处理
117 $("ul li").hover(function () {
118 //停止定时器
119 clearInterval(timerHandl);
120 }, function () {
121 //保持句柄
122 timerHandl = timerScroll();
123 })
124 /*
125 在滚动的时,单击li并将其移动到中间高亮显示的处理方法
126 timerHandl:单击停止计时器所需的计时器句柄
127 */
128 $("ul li").each(function () {
129 $(this).click(function () {
130 var selfclik = $(this);
131 clearInterval(timerHandl);
132 //只对普通的照片进行处理,高亮居中的照片不再处理
133 if ($(this).hasClass("Zzhao")) {
134 //index()方法用来获取jquery对象的位置索引
135 var currentIndex = $(this).index();
136 //高亮图片的索引位置,以中间高亮图片为原点
137 var hightIndex = $(".Zzhao_cent").index();
138 //currentIndex > hightIndex说明单击的图片在高亮图片右边
139 if (currentIndex > hightIndex) {
140 //移动的步数
141 var step = currentIndex - hightIndex;
142 $(this).removeClass("Zzhao").addClass("Zzhao_cent");
143 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
144 //移动多少次
145 for (var i = 0; i < step; i++) {
146 srcollImages.firstInsertAfterLast();
147 }
148
149 } else {
150 //中间高亮图片之前的单击处理
151 //移动的步数
152 var step = currentIndex + hightIndex + 1;
153 $(this).removeClass("Zzhao").addClass("Zzhao_cent");
154 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
155 //移动多少次
156 for (var i = 0; i < step; i++) {
157 srcollImages.firstInsertAfterLast();
158 }
159 }
160 //当单击某个图片时,将对应的信息在下面的span中显示
161 for (var i = 0; i < Tearchers.length; i++) {
162 var teacher = Tearchers[i];
163 if (teacher) {
164 if (selfclik.find("img").attr("src") == teacher.imgsrc) {
165 $(".T1").html(teacher.T1);
166 $(".T2").html(teacher.T2);
167 $(".T3").html(teacher.T3);
168 }
169 }
170
171 }
172 }
173 });
174 });
175 });
176
177
178 /*
179 定时器开始,图片循环滚动
180 timerHandl:定时器句柄,用来控制开启和停止*/
181 function timerScroll() {
182 var timerHandl = setInterval(function () {
183 //获得当前高亮的li
184 var $hightli = srcollImages.getHightLightLi($(".Teac"));
185 //将第一个li插入最后一个li后面
186 srcollImages.firstInsertAfterLast();
187 //移除高亮的li的Zzhao_cent类,添加遮罩类Zzhao,紧跟的下一个li移除遮罩类Zzhao,添加高亮类Zzhao_cent
188 $hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
189
190 }, 1000);
191 return timerHandl;
192 }
193 </script>
194 </head>
195
196 <body>
197 <p class="teacher">
198 <p class="Teac">
199 <ul>
200 <li class="Zzhao">
201 <a href="#"><img src="imges/teach_1.png" /></a>
202 </li>
203 <li class="Zzhao">
204 <a href="#"><img src="imges/teach_2.png" /></a>
205 </li>
206 <li class="Zzhao">
207 <a href="#"><img src="imges/teach_3.png" /></a>
208 </li>
209 <li class="Zzhao">
210 <a href="#"><img src="imges/teach_4.png" /></a>
211 </li>
212 <li class="Zzhao_cent">
213 <a href="#"><img src="imges/teach_5.png" /></a>
214 </li>
215 <li class="Zzhao">
216 <a href="#"><img src="imges/teach_6.png" /></a>
217 </li>
218 <li class="Zzhao">
219 <a href="#"><img src="imges/teach_7.png" /></a>
220 </li>
221 <li class="Zzhao">
222 <a href="#"><img src="imges/teach_8.png" /></a>
223 </li>
224 <li class="Zzhao">
225 <a href="#"><img src="imges/teach_9.png" /></a>
226 </li>
227 </ul>
228 <p class="Jjie">
229 <span class="T1">萌萌雨5</span>
230 <span class="T2">上海复旦大学硕士学位5</span></br>
231 <p class="T3">
232 追求完美与一身的现代化教师女性,才华横溢
233 一表人才,优秀教师5
234 </p>
235 </p>
236 </p>
237 </p>
238 <script type="text/javascript">
239
240 </script>
241
242 </body>
243 </html>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-[JQuery]用InsertAfter实现图片走马灯展示效果全部内容,希望文章能够帮你解决javascript代码实例教程-[JQuery]用InsertAfter实现图片走马灯展示效果所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。