效果知識點：企業布局技巧，如何高效的編寫CSS樣式，常用選擇器，基本標簽，盒子模型，jquery類庫調用，JS特效編寫，JS編程思維等。

京東電梯式輪播源碼：

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

23456

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

總結

以上是生活随笔為你收集整理的php 电梯程序设计,教你写出京东电梯式轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。