教你写出京东电梯式轮播

效果知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。

京东电梯式轮播源码：

*{margin:0px;}
/* 属性:值; 身高:1.7m; 颜色:红色; px像素*/
#flash{width:670px;/*宽*/height:240px;/*高*/background:#cc99cc;/*背景颜色*/
        margin:200pxauto 0px;
        position:relative;/*相对定位*/overflow:hidden;/*超出部分隐藏*/}
#flash .scroll{width:670px;height:2400px;
                position:absolute;/*绝对定位*/left:0px;top:0px;}
#flash .scroll img{display:block;/*块级*/}
#flash ul.button{height:20px;width:144px;position:absolute;
                bottom:20px;right:10px;}
#flash ul.button li{list-style-type:none;/*去掉圆点*/
        width:20px;height:20px;background:#666;float:left;/*左浮动*/
        margin:0px2px;
        color:#fff;text-align:center;/*水平距中*/
        font-size:12px;
        line-height:20px;/*行高 文字竖直距中*/
        border-radius:10px;/*圆半径*/
        box-shadow:2px2px 5px #000; }
#flash ul.button li.hover{background:#cc3300;}





    
    
        
        
        
        
        
        
    

    
    
    
        1
        
2
        
3
        
4
        
5
        
6
    
    




    var_index=0;
    varsetTime=null;
    $("ul.button li").hover(function(){
        clearInterval(setTime);//清处定时播放器
        _index=$(this).index();
        //alert(_index);
        // 给添加　class="hover"
        $(this).addClass("hover").siblings("li").removeClass("hover");
        $(".scroll").animate({top:-(_index*240)},1000);
    },function(){
        autoPlay();//鼠标移开，调用自动播放
    });
    //自动轮播
    functionautoPlay(){
        setTime=setInterval(function(){
            _index++;//序列号加 1
            if(_index>5){_index=0;}//当播到最后一张时，回到第一张
            $("ul.button li").eq(_index).addClass("hover").siblings("li").removeClass("hover");
            $(".scroll").animate({top:-(_index*240)},1000);
        },2000);
        
    }
    autoPlay();

最后给程序员几点建议：

1、没有所谓的“最好的语言”某些语言和工具只是在解决特定对应的问题时比其它的要好一点。当学习新的语言的时候，不要尝试把你过去的思维模式带到新的语言系统中。相应地，我们应该学会如何更“地道”用新语言编程。

2、放松心态、保持“单纯”编程是一个巨大的乐高积木集合，充满了各种需要被解决的有趣的问题。为了深入弄懂其中的构造，花时间去编写有趣的程序，将比给你任何任命都要有趣的多。

3、最优秀的程序员总是在工作之外自己也一直尝试编程。如果你真的非常喜欢且擅长这样，你将永远不会失业。

4、当你卡壳的时候，在纸上写下你的程序。我是认真的。这非常神奇，是在编程竞赛中的标准训练模式。（我认为这个方法有效的原因是，当你不必花费精力去考虑语法的时候，你会有更多的精力去思考问题的本质和如何解决它）。