javascript代码实例教程-[JQuery]用InsertAfter实现图片走马灯展示效果

发布时间:2019-01-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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:&#39;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">

 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     <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,请注明来意。