[JQuery]用InsertAfter实现图片走马灯展示效果

写在前面

最近一个搞美工的朋友让我给他写一个图片轮播的特效。

需求：

图片向左循环滚动。
图片滚动到中间高亮显示，并在下方显示照片人物对应的信息。
鼠标悬停止滚动。
鼠标离开开始滚动。
单击图片，图片移到中间并高亮显示。

分析

思考一

首先想到的是图片轮播的插件，找了几款，并不是太满意，就放弃了。

思考二

然后想到使用jquery的animate()方法，对这个不熟悉，也放弃了。

jQuery animate() 方法用于创建自定义动画。

语法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

实例
$("button").click(function(){$("div").animate({left:'250px'});
});
说明：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

详细参数说明：http://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" "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="Css/Style.css" rel="stylesheet" type="text/css" />
  7     <script src="Script/jquery-1.10.2.js"></script>
  8
  9     <script type="text/javascript">
 10         var Tearchers = [{
 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     <div class="teacher">
198         <div 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             <div 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             </div>
236         </div>
237     </div>
238     <script type="text/javascript">
239
240     </script>
241
242 </body>
243 </html>

效果

源码下载：http://files.cnblogs.com/wolf-sun/Scroll.rar

总结

在使用jquery或者js实现该功能的时候，也没想着让代码多优雅，就是一个目标先实现该功能再说，然后再使用面向对象的思想慢慢的优化将里面乱糟糟的东西抽象出来，也想过弄一个插件来着，可惜由于功底有限也就放弃了，插件的方式还得再研究研究。实现的方式不唯一，这里也是记录一下自己的实现方式。在实现该功能中，对jquery的文档操作，animate方法，选择器，以及this的作用域问题又复习了一下。

博客地址：

http://www.cnblogs.com/wolf-sun/

博客版权：

本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！
再次感谢您耐心的读完本篇文章。

转载：http://www.cnblogs.com/wolf-sun/p/4043207.html

[JQuery]用InsertAfter实现图片走马灯展示效果相关推荐

jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
【三石jQuery视频教程】01.图片循环展示_重发
大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的HTML.CSS和jQuery来实现一个超级简单的图片循环展示效果,先来看下最终的产品: Step1 ...
【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果更新版本:slideview 图片滑动(扩展/收缩)展示效果看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...
JavaScript 图片切换展示效果
JavaScript 图片切换展示效果看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...

[JQuery]用InsertAfter实现图片走马灯展示效果

写在前面

分析

实践

总结

[JQuery]用InsertAfter实现图片走马灯展示效果相关推荐

最新文章

热门文章