Teach you how to write a JD elevator carousel-JS Tutorial-php.cn

Effect knowledge points: enterprise layout skills, how to write CSS styles efficiently, commonly used selectors, basic tags, box models, jquery class library calls, JS special effects writing, JS programming thinking, etc.

Jingdong elevator carousel source code:

       Document   *{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();

Copy after login

Finally give the program Some suggestions from members:

1. There is no so-called "best language"Some languages and tools are only used to solve specific corresponding problems. A little better than others. When learning a new language, don't try to bring your past thought patterns into the new language system. Accordingly, we should learn how to program in a new language more "authentically".

2. Relax and stay "simple"Programming is a huge collection of Lego bricks, full of All kinds of interesting problems that need to be solved. Taking the time to write interesting programs in order to deeply understand the structure will be more interesting than any appointment given to you.

3. The best programmers always try programming outside of work. If you really love it and are good at it, you will never be unemployed.

4. When you get stuck, write down your program on paper. I was serious. This is amazing and is the standard training pattern in programming competitions. (The reason I think this works is that when you don't have to spend energy thinking about syntax, you have more energy thinking about the nature of the problem and how to solve it).

The above is the detailed content of Teach you how to write a JD elevator carousel. For more information, please follow other related articles on the PHP Chinese website!