写在前面

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

需求：

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

分析

思考一

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

思考二

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

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

语法

  1. $(selector).animate({params},speed,callback);

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

实例

  1. $("button").click(function(){
  2.   $("div").animate({left:'250px'});
  3. });

说明：默认地，所有 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:; padding:; list-style:none;}
  4.  body{margin:; padding:; 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:; 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:; list-style:none;}

css

静态页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.              timerHandl：定时器句柄，用来控制开启和停止*/
  180.          function timerScroll() {
  181.              var timerHandl = setInterval(function () {
  182.                  //获得当前高亮的li
  183.                  var $hightli = srcollImages.getHightLightLi($(".Teac"));
  184.                  //将第一个li插入最后一个li后面
  185.                  srcollImages.firstInsertAfterLast();
  186.                  //移除高亮的li的Zzhao_cent类，添加遮罩类Zzhao，紧跟的下一个li移除遮罩类Zzhao，添加高亮类Zzhao_cent
  187.                  $hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
  188.  
  189.              }, 1000);
  190.              return timerHandl;
  191.          }
  192.      </script>
  193.  </head>
  194.  
  195.  <body>
  196.      <div class="teacher">
  197.          <div class="Teac">
  198.              <ul>
  199.                  <li class="Zzhao">
  200.                      <a href="#"><img src="imges/teach_1.png" /></a>
  201.                  </li>
  202.                  <li class="Zzhao">
  203.                      <a href="#"><img src="imges/teach_2.png" /></a>
  204.                  </li>
  205.                  <li class="Zzhao">
  206.                      <a href="#"><img src="imges/teach_3.png" /></a>
  207.                  </li>
  208.                  <li class="Zzhao">
  209.                      <a href="#"><img src="imges/teach_4.png" /></a>
  210.                  </li>
  211.                  <li class="Zzhao_cent">
  212.                      <a href="#"><img src="imges/teach_5.png" /></a>
  213.                  </li>
  214.                  <li class="Zzhao">
  215.                      <a href="#"><img src="imges/teach_6.png" /></a>
  216.                  </li>
  217.                  <li class="Zzhao">
  218.                      <a href="#"><img src="imges/teach_7.png" /></a>
  219.                  </li>
  220.                  <li class="Zzhao">
  221.                      <a href="#"><img src="imges/teach_8.png" /></a>
  222.                  </li>
  223.                  <li class="Zzhao">
  224.                      <a href="#"><img src="imges/teach_9.png" /></a>
  225.                  </li>
  226.              </ul>
  227.              <div class="Jjie">
  228.                  <span class="T1">萌萌雨5</span>
  229.                  <span class="T2">上海复旦大学硕士学位5</span></br>
  230.                  <p class="T3">
  231.                      追求完美与一身的现代化教师女性，才华横溢
  232.                      一表人才，优秀教师5
  233.                  </p>
  234.              </div>
  235.          </div>
  236.      </div>
  237.      <script type="text/javascript">
  238.  
  239.      </script>
  240.  
  241.  </body>
  242.  </html>

Index.html

效果

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

总结

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

[JQuery]用InsertAfter实现图片走马灯展示效果的更多相关文章

  1. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  2. 3-5 编程练习：jQuery实现简单的图片对应展示效果

    3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...

  3. 【三石jQuery视频教程】01.图片循环展示

    视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  4. 【三石jQuery视频教程】01.图片循环展示_再次重发

    之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...

  5. Elastislide - 响应式的图片循环展示效果

    Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...

  6. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  7. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  8. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  9. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

随机推荐

  1. bzoj4900 [CTSC2017]密钥

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4900 [题解] 恭喜bzoj达到40页 考场由于傻逼基数排序写挂了而gg. 竟然忘了考试前一 ...

  2. POJ1080（LCS变形）

    Human Gene Functions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  3. python进程池pool的starmap的使用

    #!/usr/bin/env python3 from functools import partial from itertools import repeat from multiprocessi ...

  4. Python selenium.webdriver.chrome.options.Options() Examples

    The following are 27 code examples for showing how to use selenium.webdriver.chrome.options.Options( ...

  5. [NOIP 2015] 斗地主 landlord

    想起几个月之前的 noip2015-只会瞎搞-这道题骗了 30 分.T T 题目 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的 A 到 K 加上大小王的共 54 张牌 ...

  6. 关于测试url传值的问题

    url1:http://localhost:8080/fms/finan/isRiskCustomer.action?customername="xxxxxxxx"; 如上这样写, ...

  7. [ 总结 ] Linux 下文件描述符

    1.概述: 文件描述符是内核为了高效管理已被打开的文件所创建的索引.是一个非负整数,用于代指被打开的文件.所有通过I/O操作的系统调用都通过文件描述符. 文件描述符用以表明每一个被进程所打开的文件和s ...

  8. 关于oracle的连接时ORA-12519错误的解决方案

    系统在运行时出现了ORA-12519的错误,无法连接数据库,后来在网上找了下,找到了如下的解决方法,共享下. OERR: ORA-12519 TNS:no appropriate service ha ...

  9. OpenCV——Mat、CvMat、IplImage类型浅析【转】

    OpenCV中常见的与图像操作有关的数据容器有Mat,cvMat和IplImage. 一.Mat类型:矩阵类型,Matrix. 在openCV中,Mat是一个多维的密集数据数组.可以用来处理向量和矩阵 ...

  10. yii2中判断值是否存在二维数组中

    //在yii2中,在类里面的函数,可以不加action $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); / ...