首页 > 代码库 > [JQuery]用InsertAfter实现图片走马灯展示效果
[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 //获得当前高亮的li184 var $hightli = srcollImages.getHightLightLi($(".Teac"));185 //将第一个li插入最后一个li后面186 srcollImages.firstInsertAfterLast();187 //移除高亮的li的Zzhao_cent类，添加遮罩类Zzhao，紧跟的下一个li移除遮罩类Zzhao，添加高亮类Zzhao_cent188 $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 一表人才，优秀教师5234 </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的作用域问题又复习了一下。
[JQuery]用InsertAfter实现图片走马灯展示效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。