写在前面

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

需求：

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

分析

思考一

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

思考二

然后想到使用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！

详细参数说明：

 由上可以知道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   2   3   4     
        5       6     
        7       8   9     194 195 196 197     
      
       198         
       
        199             
        
         200                 
         
201                     202                 
203                 
         
204                     205                 
206                 
         
207                     208                 
209                 
         
210                     211                 
212                 
         
213                     214                 
215                 
         
216                     217                 
218                 
         
219                     220                 
221                 
         
222                     223                 
224                 
         
225                     226                 
227             
        
228             
        
         229                 
         萌萌雨5230                 
         上海复旦大学硕士学位5
         
231                 
         
232                     追求完美与一身的现代化教师女性，才华横溢233                     一表人才，优秀教师5234                 
235             
        
236         
       
237     
      
238     241 242 243 

 效果

源码下载：

总结

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