[JQuery]用InsertAfter实现图片走马灯展示效果
生活随笔
收集整理的這篇文章主要介紹了
[JQuery]用InsertAfter实现图片走马灯展示效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
寫在前面
最近一個搞美工的朋友讓我給他寫一個圖片輪播的特效。
需求：
分析
思考一
首先想到的是圖片輪播的插件，找了幾款，并不是太滿意，就放棄了。
思考二
然后想到使用jquery的animate()方法，對這個不熟悉，也放棄了。
jQuery animate() 方法用于創(chuàng)建自定義動畫。
語法
$(selector).animate({params},speed,callback);必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示 animate() 方法的簡單應(yīng)用；它把 <div> 元素移動到左邊，直到 left 屬性等于 250 像素為止：
實(shí)例
$("button").click(function(){$("div").animate({left:'250px'}); });說明：默認(rèn)地，所有 HTML 元素都有一個靜態(tài)位置，且無法移動。
如需對位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！
詳細(xì)參數(shù)說明：http://www.w3school.com.cn/jquery/jquery_animate.asp
?由上可以知道animate方法對操作位移比較方便（也許對該方法了解的不夠深入），而需求需要對中間高亮顯示的照片并在下方顯示對應(yīng)人物的信息。
?思考三
?該方式有點(diǎn)類似走馬燈的效果，另外想到了jquery中常用的文檔操作的方法：append()、appendTo()、before()、insertAfter()、insertBefore()
?而這些方法在使用時，針對元素本身是否已經(jīng)存在，有不同的效果，比如動態(tài)創(chuàng)建的元素，使用文檔操作的方法是在目標(biāo)對象之前(之后)追加（插入），而對于已經(jīng)存在的元素，則會出現(xiàn)移動的效果。
?所以，想到了，每移動一個圖片，將最前面的那個圖片插入在最后一張圖片后面，然后使用定時器不間斷的移動就可以滿足上面的需求了，有了這些考慮，就開始動手實(shí)踐了。
實(shí)踐
朋友給的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;}靜態(tài)頁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": "上海復(fù)旦大學(xué)碩士學(xué)位1", 14 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師1", 15 "imgsrc": "imges/teach_1.png" 16 }, 17 { 18 "id": "2", 19 "T1": "萌萌雨2", 20 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位2", 21 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師2", 22 "imgsrc": "imges/teach_2.png" 23 24 }, 25 { 26 "id": "3", 27 "T1": "萌萌雨3", 28 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位3", 29 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師3", 30 "imgsrc": "imges/teach_3.png" 31 }, { 32 "id": "4", 33 "T1": "萌萌雨4", 34 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位4", 35 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師4", 36 "imgsrc": "imges/teach_4.png" 37 }, { 38 "id": "5", 39 "T1": "萌萌雨5", 40 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位5", 41 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師5", 42 "imgsrc": "imges/teach_5.png" 43 } 44 , { 45 "id": "6", 46 "T1": "萌萌雨6", 47 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位6", 48 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師6", 49 "imgsrc": "imges/teach_6.png" 50 51 }, { 52 "id": "7", 53 "T1": "萌萌雨7", 54 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位7", 55 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師7", 56 "imgsrc": "imges/teach_7.png" 57 58 }, { 59 "id": "8", 60 "T1": "萌萌雨8", 61 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位8", 62 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師8", 63 "imgsrc": "imges/teach_8.png" 64 65 }, { 66 "id": "9", 67 "T1": "萌萌雨9", 68 "T2": "上海復(fù)旦大學(xué)碩士學(xué)位9", 69 "T3": "追求完美與一身的現(xiàn)代化教師女性，才華橫溢一表人才,優(yōu)秀教師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 //當(dāng)前對象 92 var teacher = this; 93 if ($result.find("img").attr("src") == teacher.imgsrc) { 94 //因?yàn)樗饕菑?開始，為了讓信息和照片對應(yīng)所做的處理 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 //鼠標(biāo)懸停在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 //只對普通的照片進(jìn)行處理，高亮居中的照片不再處理 133 if ($(this).hasClass("Zzhao")) { 134 //index()方法用來獲取jquery對象的位置索引 135 var currentIndex = $(this).index(); 136 //高亮圖片的索引位置，以中間高亮圖片為原點(diǎn) 137 var hightIndex = $(".Zzhao_cent").index(); 138 //currentIndex > hightIndex說明單擊的圖片在高亮圖片右邊 139 if (currentIndex > hightIndex) { 140 //移動的步數(shù) 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 //移動的步數(shù) 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 //當(dāng)單擊某個圖片時，將對應(yīng)的信息在下面的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 定時器開始，圖片循環(huán)滾動 180 timerHandl：定時器句柄，用來控制開啟和停止*/ 181 function timerScroll() { 182 var timerHandl = setInterval(function () { 183 //獲得當(dāng)前高亮的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">上海復(fù)旦大學(xué)碩士學(xué)位5</span></br> 231 <p class="T3"> 232 追求完美與一身的現(xiàn)代化教師女性，才華橫溢 233 一表人才，優(yōu)秀教師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
總結(jié)
在使用jquery或者js實(shí)現(xiàn)該功能的時候，也沒想著讓代碼多優(yōu)雅，就是一個目標(biāo)先實(shí)現(xiàn)該功能再說，然后再使用面向?qū)ο蟮乃枷肼膬?yōu)化將里面亂糟糟的東西抽象出來，也想過弄一個插件來著，可惜由于功底有限也就放棄了，插件的方式還得再研究研究。實(shí)現(xiàn)的方式不唯一，這里也是記錄一下自己的實(shí)現(xiàn)方式。在實(shí)現(xiàn)該功能中，對jquery的文檔操作，animate方法，選擇器，以及this的作用域問題又復(fù)習(xí)了一下。
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版權(quán)： | 本文以學(xué)習(xí)、研究和分享為主，歡迎轉(zhuǎn)載，但必須在文章頁面明顯位置給出原文連接。 如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起討論，共同進(jìn)步！ 再次感謝您耐心的讀完本篇文章。 轉(zhuǎn)載：http://www.cnblogs.com/wolf-sun/p/4043207.html |
總結(jié)
以上是生活随笔為你收集整理的[JQuery]用InsertAfter实现图片走马灯展示效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux内核参数优化 for 高并发服
- 下一篇： RabbitMQ 一二事(4) - 路由