教你写出京东电梯式轮播
程序员文章站
2023-12-30 12:46:40
...
效果知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。
京东电梯式轮播源码：
<!doctype html>
<htmllang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<metacharset="UTF-8">
<metaname="Keywords"content="关键词一，关键词二">
<metaname="Description"content="网站描述内容">
<title>Document</title>
<!--引用css js 文件的引入-->
<styletype="text/css">
*{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;}
</style>
</head>
<body>
<!--p 盒子模型，高度，宽度，放内容的长方形容器 姓名=“张三”-->
<pid="flash">
<!--图片滚动开始-->
<pclass="scroll">
<imgsrc="images/1.jpg" />
<imgsrc="images/2.jpg" />
<imgsrc="images/3.jpg" />
<imgsrc="images/4.jpg" />
<imgsrc="images/5.jpg" />
<imgsrc="images/6.jpg" />
</p>
<!--图片滚动结束-->
<!--按扭开始-->
<ulclass="button">
<liclass="hover">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--按扭结束-->
</p>
<!--引用 jqeury 文件-->
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript">
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();
</script>
<!--
1、如何在页面当中构建一个有宽度，高度的长方形 （p盒子模型）
2、讲到了外边距的概念 margin, 解决了外边距的兼容型问题 *{margin:0px;}
3、利用外边距来控制长方形的位置 margin:上(200px) 左右(auto) 下(0px);
4、分析了动画实现原理（在 #flash)长方形里，构建了一个宽度一样大小，高度无限高的长方 形) 然后利用相对和绝对定位来实现他的动画原理
5、如何在页面当中插入一张图 <img src="地址"/>
6、处理了图片之间产生间隙的问题（display:block;） 超出部分内容隐藏 overflow:hidden;
7、讲ul无序列表标签 （去掉li的圆点，给li添加宽度和高度 利用把小长方形从竖直变成水平 控制文字大小，颜色 水平距中，竖直距中，利最新技术css3 把正方形变成圆形 border-radius:10px; 利用外边距产生兼距）
-->
</body>
</html>
最后给程序员几点建议：
1、没有所谓的“最好的语言”某些语言和工具只是在解决特定对应的问题时比其它的要好一点。当学习新的语言的时候，不要尝试把你过去的思维模式带到新的语言系统中。相应地，我们应该学会如何更“地道”用新语言编程。
2、放松心态、保持“单纯”编程是一个巨大的乐高积木集合，充满了各种需要被解决的有趣的问题。为了深入弄懂其中的构造，花时间去编写有趣的程序，将比给你任何任命都要有趣的多。
3、最优秀的程序员总是在工作之外自己也一直尝试编程。如果你真的非常喜欢且擅长这样，你将永远不会失业。
4、当你卡壳的时候，在纸上写下你的程序。我是认真的。这非常神奇，是在编程竞赛中的标准训练模式。（我认为这个方法有效的原因是，当你不必花费精力去考虑语法的时候，你会有更多的精力去思考问题的本质和如何解决它）。
以上就是教你写出京东电梯式轮播的详细内容，更多请关注其它相关文章！