php 电梯程序设计,教你写出京东电梯式轮播

效果知识点：企业布局技巧，如何高效的编写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 电梯程序设计,教你写出京东电梯式轮播的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。