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();