JS学习第二周总结
2019-03-30 09:30
113 查看
版权声明：都是我自己码子原创的，转载引用请注明出处。 https://blog.csdn.net/weixin_44791254/article/details/88907275
注意点三：arguments
console.log(arguments);// 获取到实参数组
cons
4000
ole.log(arguments[0]);// 第一个实参
console.log(arguments.length);// 实参的个数
实现形参实参统一的判断代码：fun.length=arguments.length。
通过下标（索引）来获取数组中元素，没有的元素返回undefined
遍历数组元素，for循环
数组常用的几个方法
push：向数组末尾添加一个或多个元素，并返回新数组长度；
shift：删除并返回数组第一个元素；
unshift：向数组开头添加元素，并返回新数组长度；
concat：连接多个数组并返回结果；
reverse：颠倒数组顺序；
sort：对数组元素进行排序；证明是没用的！！！
toString：把数组转成字符串，并返回结果；
join：把数组所有元素放入一个字符串，并用指定符号分割；
slice：从已有的数组返回选定的元素，可以传负值；
splice：删除元素并添加新元素，改变的元素比slice多一个，基本涵盖slice功能，记这个就够了；
split(‘字符串中符号’)符号必须统一用指定符号分隔，把字符串转成数组
二元运算符
与或非
三元（三目）运算
全选、反选代码优化，同样的重复内容，要想到使用函数重复调用来简化。
事件调用函数，如果不使用匿名函数的话，调用函数会直接执行，所以必须用匿名函数包裹调用函数内容。
访问节点
id属性：getElementById
class属性：getElementsByClassName（IE6、7、8不支持这个写法）
例如IE6、7基本上没有人在用了，但是IE8使用人数还不少
IE9及以后的版本是兼容的
写一个兼容的函数，直接调用来处理兼容问题
删除元素 .removeChild(要删除的元素);
克隆一个元素 cloneNode(); true深克隆
1.上周内容回顾
- 多个script标签，一个报错，另一个还是会继续执行。
- 多个window.onload入口函数，后面的会覆盖前面的，最终只会执行一个。
- 函数：可以重复使用的代码块的封装。
- 函数三种创建方式：函数声明式、函数表达式、Function——构造函数。
- 变量声明提升：JS执行前会预解析，将变量声明提升到最前面。
2.函数参数
- 注意点一：
function fun(a,b,c){
console.log(a+b+c);
}
fun();// 返回NaN
- 注意点二： 形参实参不统一，会按照顺序为参数赋值，多了少了都是这样。
- undefined执行任何操作返回NaN
-
console.log(fun.length);// 获取到的是形参的个数
3.return
- return后面的代码不会执行；
- 后面的代码不能换行。
- 可以使用return返回需要值，来封装函数。
4.表单常用事件
- onfocus（获得焦点）
- onblur（失去焦点）
- focus()自动获取焦点
- value 获取表单输入的内容
- select() 表单选择内容
- checked=true 选中
- oninput 输入内容时(IE6、7、8兼容的是onpropertychange。)
5.获得元素的方式
- 通过Id获取元素，document.getElementById();
- 通过标签名获取元素，documnet.getElementsByTagName()，获取到的是一个伪数组；
- 通过类名获取元素，document.getElementsByClassName(),获取到的也是一个伪数组；
- 对于获取到伪数组的情况，一般处理方式如下： 通过for循环遍历所有元素
- 通过父级元素缩小范围之后再获取里面的元素
6.数组
- 创建数组： var arr=[1,2,3,4,5…];
- var arr2=new Array(1,2,3,4,5…)// 使用不多
-
pop：删除并返回最后一个元素；
7.运算符
- 一元运算符 typeof
- ++、–
- +a、-a和数学上的正负相同
-
+、-、*、/、%
-
表达式？结果1：结果2；
8.循环
- for循环，从1到100求和；
- while循环，while(条件){代码块}；
- do{代码块}while(条件)；
while(i<=100){
sum+=i;
i++;
}
do{
sum+=i;
i++
}while(i<=100)
9.switch语句
- switch(条件){case value:语句；break；…default 语句；break;}
10.DOM
JS组成部分：
- ECMAScript
- DOM——Document Object Model 文档对象模型
- BOM
DOM：
- DOM树
- 节点：（元素、标签） 标签节点
- 属性节点
- 文本节点
-
访问标签节点：getElementsByTagName
11.节点关系
- 父节点parentNode，这个操作可以连续使用，如span.parentNode.parentNode
- 兄弟节点nextElementSibling、previousElementSibling；注意nextSibling、previousSibling是IE6、7、8专用获取方式。
- 子节点firstElementChild、lastElementChild；注意firstChild、lastChild是IE6、7、8专用获取方式。 childNodes，他是一个W3C指定推荐的，包含换行在内
- nodeType==1，表示这是元素节点
- children能拿到子元素，且没有多余内容，这是一个非标准，但是好用，且没有兼容问题。
12.节点操作
- 创建元素 document.creatElement(标签字符串); 插入元素 .appendChild(创建元素);
- 创建的是子元素，插入到父元素的最后面
- 另一种插入元素 insertBefore(新创建元素，参考元素);如果参考元素传null，就和appendChild一样了。
13.属性操作
- 获得属性 getAttribute()；
- 删除属性 removeAttribute；
- 修改属性 setAttribute；
14.小总结
- 如果要改变的元素样式是写在style标签中的，一般是.style再加上属性名来修改样式；不是写在style标签中的属性，例如src是不用再写.style的，而是直接写.src。
- innerHTML，修改元素内容
- this关键字，指的是事件的调用者
- 通过className改变样式
- 字符串拼接，变量要单独提出来，用+号拼接，空格坚决不能少。
- 排它思想，首先把所有都干掉，再给自己添加
- 自定义属性.index拿到当前元素下标
- ||使用或符号来写兼容注意点：需要先写高级浏览器
- 事件可以连写，..onpropertychange=function(){}
- 常用事件回顾： onchange
- oninput（onpropertychange）
- onfocus
- onblur
- onmouseover
- onmouseout
- onclick
- ondblick
- onload
本周案例总结
1.页面上有三个按钮，每个按钮点击后会出现一个对应的盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:skyblue;
text-align: center;
vertical-align: middle;
display: none;
margin-top:30px;
}
button{
width:50px;
height:50px;
background-color: yellow;
}
</style>
</head>
<body>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<script type="text/javascript">
function myFunction(boxId,btnId){
var boxId=document.getElementById(boxId);
var btnId=document.getElementById(btnId);
btnId.function(){
boxId.style.display="block";
}
}
myFunction("one","btn1");
myFunction("two","btn2");
myFunction("three","btn3");
</script>
</body>
</html>
2.隔行变色案例，鼠标经过高亮显示
注意：行内样式权重高于类名设置的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
}
li{
line-height:40px;
margin-top:10px;
border:1px solid #777;
padding-left:20px;
width:300px;
height:40px;
}
.bgc{
background-color:skyblue!important;
}
</style>
</head>
<body>
<ul>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
<li>我是段落内容，请仔细阅读。</li>
</ul>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
if(i%2==0){
lis[i].style.backgroundColor="yellow";
}
lis[i].function(){
this.className="bgc";
}
lis[i].function(){
this.className="";
}
}
</script>
</body>
</html>
3.精灵图实现九宫格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
width:410px;
height:310px;
margin:100px auto;
border:1px solid #666;
padding-left:20px;
}
li{
display: block;
width:100px;
height:100px;
float:left;
text-align: center;
margin-bottom: 10px;
}
i{
display:block;
width:44px;
height:44px;
background:url(img/QQ图片20190326144407.png) no-repeat;
margin-top:10px;
margin-left:40px;
}
a{
text-decoration: none;
color:#999;
font-size:18px;
}
</style>
</head>
<body>
<ul>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
<li>
<i></i>
<a href="">充话费</a>
</li>
</ul>
<script type="text/javascript">
var is=document.getElementsByTagName("i");
for(var i=0;i<is.length;i++){
is[i].style.backgroundPosition="0px "+(-43*i)+"px";// 空格不能少
// is[i].style.backgroundPositionY=(-43*i)+"px";// 只有Y方向变量改变
}
</script>
</body>
</html>
4.京东搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
position: relative;
}
#container{
width: 500px;
margin:100px auto;
}
#txt{
height:30px;
width:500px;
}
#label{
position: absolute;
top:5px;;
left:10px;
cursor: text;
}
</style>
</head>
<body>
<div id="container">
<input type="text" id="txt"/>
<label id="label" for="txt">默认商品</label>
</div>
<script type="text/javascript">
var txt=document.getElementById("txt");
var label=document.getElementById("label");
txt.function(){
label.style.color="#666";
}
txt.function(){
label.style.color="black";
}
txt.function(){
label.style.display="none";
if(txt.value==""){
label.style.display="block";
}
}
</script>
</body>
</html>
5.排它思想，让盒子点击单独高亮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
float:left;
border:1px solid red;
margin:100px 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].function(){
for(var j=0;j<divs.length;j++){
divs[j].style.backgroundColor="";
}
this.style.backgroundColor="blue";
}
}
</script>
</body>
</html>
6.tab栏效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:382px;
height:440px;
border:1px solid #666;
margin:100px auto;
}
#big{
margin:auto;
width:360px;
height:360px;
}
#small li{
display: inline-block;
list-style: none;
border:1px solid #666;
}
#big img{
display: none;
}
#small .light{
border:2px red solid;
}
#big .show{
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="small">
<ul>
<li class="light"><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
<li><img src="img/05.jpg"/></li>
</ul>
</div>
<div id="big">
<img src="img/01big.jpg" class="show"/>
<img src="img/02big.jpg"/>
<img src="img/03big.jpg"/>
<img src="img/04big.jpg"/>
<img src="img/05big.jpg"/>
</div>
</div>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
var big=document.getElementById("big");
var imgs=big.getElementsByTagName("img");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
imgs[j].className="";
}
this.className="light";
imgs[this.index].className="show";
}
}
</script>
</body>
</html>
7.用户输入一个英雄名字，得到对应的外号。
switch(val){
case "宋江":
alert("及时雨——"+val);
break;
case "林冲":
alert("豹子头——"+val);
break;
case "杨志":
alert("青面兽——"+val);
break;
case "花荣":
alert("小李广——"+val);
break;
default:
alert("查无此人，请自行百度");
reak;
}
8.下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><
20000
/title>
<style type="text/css">
body {
background-image: url(img/QQ图片20190327143644.jpg);
}
select {
width: 100px;
height: 50px;
font-size: 24px;
padding-left: 20px;
}
</style>
</head>
<body>
<select id="sec">
<option value="1">春</option>
<option value="2">夏</option>
<option value="3">秋</option>
<option value="4">冬</option>
</select>
<script type="text/javascript">
var sec = document.getElementById("sec");
sec.onchange = function() {
var val = sec.value;
switch(val) {
case "1":
document.body.style.backgroundImage = "url(img/QQ图片20190327143644.jpg)";
break;
case "2":
document.body.style.backgroundImage = "url(img/QQ图片20190327143652.jpg)";
break;
case "3":
document.body.style.backgroundImage = "url(img/QQ图片20190327143706.jpg)";
break;
case "4":
document.body.style.backgroundImage = "url(img/QQ图片20190327143659.jpg)";
break;
}
}
</script>
</body>
</html>
9.选择排序和冒泡排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=[1,3,3,2,5,4];
var arr1=arr;
maopao(arr);
console.log(arr);
xuanze(arr1);
console.log(arr1);
function maopao(arr){
var sum=0;
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
var t;
if(arr[j]<arr[j+1]){
t=arr[j];
arr[j]=arr[j+1];
arr[j+1]=t
}
sum++
}
}
console.log(sum);
}
function xuanze(arr){
var sum=0;
for(var i=0;i<arr.length-1;i++){
var k=i
for(var j=i+1;j<arr.length;j++){
if(arr[k]<arr[j]){
k=j;
}
sum++;
}
if(i!=k){
var t;
t=arr[i];
arr[i]=arr[k];
arr[k]=t
}
}
console.log(sum);
}
</script>
</body>
</html>
10.今日运势
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
font-size:18px;
}
#container{
width:530px;
height:440px;
margin:50px auto;
border:1px solid black;
padding:20px;
}
h2{
color:#666;
font-size:24px;
margin-bottom: 20px;
}
#centerLeft{
width:50px;
height:50px;
background:url(img/星座精灵图.png) no-repeat;
float:left;
margin:0px 50px;
}
select{
padding-left:10px;
width:200px;
height:30px;
font-size:18px;
display: block;
margin-bottom: 10px;
}
#yunshi{
display: block;
float:left;
}
#star{
width:80px;
height:13px;
float:left;
position: relative;
}
#lightstar{
display:block;
width:80px;
height:13px;
float:left;
background:url(img/星星图.png) left bottom no-repeat;
position: absolute;
top:5px;
left:0;
}
#blackstar{
display:block;
width:80px;
height:13px;
float:left;
background:url(img/星星图.png) left top no-repeat;
margin-top:5px;
}
#clear{
clear:both;
}
p{
margin-top:20px;
text-indent:2em;
}
</style>
</head>
<body>
<div id="container">
<div id="tops">
<h2>星座运势</h2>
</div>
<div id="centers">
<div id="centerLeft"></div>
<div id="centerRight">
<select id="sec">
<option value="0">白羊座03.21-04.19</option>
<option value="1">金牛座04.20-05.20</option>
<option value="2">双子座05.21-06.21</option>
<option value="3">巨蟹座06.22-07.22</option>
<option value="4">狮子座07.23-08.22</option>
<option value="5">处女座08.23-09.22</option>
<option value="6">天秤座09.23-10.23</option>
<option value="7">天蝎座10.24-11.22</option>
<option value="8">射手座 11.23-12.21</option>
<option value="9">摩羯座12.22-01.19</option>
<option value="10">水瓶座01.20-02.18</option>
<option value="11">双鱼座02.19-03.20</option>
</select>
<span id="yunshi">今日运势：</span>
<div id="star">
<span id="lightstar"></span>
<span id="blackstar"></span>
</div>
<div id="clear">
</div>
</div>
</div>
<div id="bottoms">
<p id="content">今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。</p>
</div>
</div>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
function change(val,num,str){
centerLeft.style.backgroundPositionY=(-val*50)+"px";
lightstar.style.width=(num*8)+"px";
content.innerHTML=str;
}
var sec=$id("sec");
var centerLeft=$id("centerLeft");
var lightstar=$id("lightstar");
var content=$id("content");
var arr=[10,9,6,8,6,8,5,2,1,3,6,1];
var str=["今天的事业运势不错，虽然容易有一些竞争者或其他小人出现在事业中，但他们反而会成就自己的事业。今天仍然适合外出学习进修，提升自己。","外出容易遇到一些小麻烦，但终能化解，转不利为有利。","会专注于事业方面，虽然在事业工作方面，会有些迷茫，这天感情方面运势也不错。","这天巨蟹会很忙碌，但会忙得非常愉快，即使平时不太爱运动的巨蟹，这天也可能很强活动一下自己。","快乐的一天，也有迁移运势，工作和健康方面的运势也都还不错。","这天适合多听取一些朋友，对自己家庭，或者房子装修布置的建议。","有利于学习考试，与上司的沟通也会比较良好，总体比较愉快。","财运很好的一天，讲话比较严谨大气，也适合多一些娱乐活动。","不错的一天，财运仍然较好，会因为平时不太熟悉的一些晚辈帮助，或者因为娱乐活动而获利。","有朋友来帮助自己，让自己信心满满，心理层面，也是比较愉悦。","暗中会得人帮助，也容易得到亲戚，邻居的一些帮助，这天财运上也还可以。","社交运仍然强旺，内心也变得强大起来，也会因为事业方面的事情，心情愉快。"];
sec.function(){
var val=this.value;
change(val,arr[val],str[val]);
}
</script>
</body>
</html>
11.商品展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:360px;
height:435px;
border:1px solid #666;
margin:100px auto;
}
#big{
width:360px;
height:360px;
background:url(img/01big.jpg) no-repeat;
}
#small li{
list-style: none;
float:left;
border:1px solid #666;
}
</style>
</head>
<body>
<div id="container">
<div id="big"></div>
<div id="small">
<ul>
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
<li><img src="img/05.jpg"/></li>
</ul>
</div>
</div>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
var big=document.getElementById("big");
function show(index){
lis[index].function(){
console.log(11);
big.style.backgroundImage="url(img/0"+(index+1)+"big.jpg)";
}
}
for(var i=0;i<lis.length;i++){
show(i);
}
</script>
</body>
</html>
12.带id名的getClass函数封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style: none;
width:100px;
height:40px;
display: inline-block;
float:left;
margin:20px;
background-color:hotpink;
}
</style>
</head>
<body>
<div id="topbox">
<ul>
<li>上1</li>
<li class="box">上2</li>
<li>上3</li>
<li class="box">上4</li>
<li>上5</li>
<li class="box">上6</li>
<li>上7</li>
</ul>
</div>
<div id="bottombox">
<ul>
<li>下1</li>
<li>下2</li>
<li>下3</li>
<li>下4</li>
</ul>
</div>
<script type="text/javascript">
function getClass(classname,id){
if(document.getElementsByClassName){
if(id){
var id=document.getElementById(id);
return id.getElementsByClassName(classname);
}else{
return document.getElementsByClassName(classname);
}
}
var arr=[];
if(id){
var id=document.getElementById(id);
var dom=id.getElementsByTagName("*");
}else{
var dom=document.getElementsByTagName("*");
}
for(var i=0;i<dom.length;i++){
var newArr=dom[i].className.split(" ");
for(var j=0;j<newArr.length;j++){
if(newArr[j]==classname){
arr.push(dom[i]);
}
}
}
return arr;
}
var boxs=getClass("box","topbox");
for(var i=0;i<boxs.length;i++){
boxs[i].style.backgroundColor="skyblue";
}
</script>
</body>
</html>
13.通过父节点关闭广告框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width:100%;
height:100px;
background-color:yellow;
position: relative;
}
span{
display: block;
width:50px;
height:50px;
background-color:red;
border-radius: 10px;
position: absolute;
top:0;
right:0;
text-align: center;
line-height: 50px;
font-size:30px;
cursor: pointer;
}
</style>
</head>
<body>
<span>X</span>
</body>
<script type="text/javascript">
var span=document.getElementsByTagName("span")[0];
span.function(){
this.parentNode.style.display="none";
}
</script>
</html>
14.简单的评论框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:500px;
margin:50px auto;
border:1px solid #333;
padding-bottom:20px;
}
input{
width:400px;
height:30px;
font-size:20px;
}
button{
width:90px;
height:30px;
font-size:20px;
}
li{
list-style:none;
font-size:16px;
height:30px;
line-height: 30px;
text-indent: 2em;
}
</style>
</head>
<body>
<div id="container">
<input type="text" value="请输入你的评论内容" />
<button>发表评论</button>
<ul>
<li>第一个评论第一个评论第一个评论第一个评论</li>
<li>第二个评论第二个评论第二个评论第二个评论</li>
<li>第三个评论第三个评论第三个评论第三个评论</li>
</ul>
</div>
<script type="text/javascript">
var input1=document.getElementsByTagName("input")[0];
var txt;
input1.function(){
if(input1.value=="请输入你的评论内容"){
input1.value="";
}
}
input1.function(){
if(input1.value==""){
input1.value="请输入你的评论内容";
}
if(input1.value!=""&&input1.value!="请输入你的评论内容"){
txt=input1.value;
}
}
var ul=document.getElementsByTagName("ul")[0];
var btn=document.getElementsByTagName("button")[0];
btn.function(){
var cLi=document.createElement("li");
cLi.innerHTML=txt;
ul.appendChild(cLi);
}
</script>
</body>
</html>
15.轮播图基础版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:590px;
height:470px;
margin:100px auto;
position: relative;
}
#box{
width:590px;
height:470px;
overflow: hidden;
}
ul{
height:50px;
list-style: none;
position: absolute;
bottom:20px;
left:50%;
margin-left:-25%;
}
ul li{
float:left;
width:50px;
height:50px;
border-radius: 25px;
background-color:hotpink;
margin-left:5px;
margin-right:5px;
line-height: 50px;
text-align: center;
font-size:28px;
font-weight: 700;
}
ul li:nth-child(1){
background-color:red;
}
button{
font-size:16px;
padding:5px;
background-color:greenyellow;
position: absolute;
top:50%;
margin-top:-5%;
}
#right{
right:0;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
</div>
<ul id="uu"></ul>
<button id="left">上一张</button>
<button id="right">下一张</button>
</div>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
var uu=$id("uu");
var imgs=$id("box").getElementsByTagName("img");
for(var i=0;i<imgs.length;i++){
var cSpan=document.createElement("span");
cSpan.innerHTML=i+1;
var cLi=document.createElement("li");
cLi.appendChild(cSpan);
uu.appendChild(cLi);
}
var lis=uu.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){
for(var j=0;j<lis.length;j++){
imgs[j].style.display="none";
lis[j].style.backgroundColor="hotpink";
}
this.style.backgroundColor="red";
imgs[this.index].style.display="block";
}
}
var left=$id("left");
var right=$id("right");
//未完待续
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 高程学习总结 第二章
- Vue.js学习及总结——循环展示
- 一句话总结：工作，用jQuery，怎么快怎么来；学习，用js，怎么精怎么来
- JS学习总结
- 20145240 《信息安全系统设计基础》第二周学习总结
- 20145213《信息安全系统设计基础》第二周学习总结
- （java） 第二周学习总结
- 20159315《网络攻防实践》第二周学习总结
- 20145301第二周学习总结
- 我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1
- 信息安全系统设计基础第二周学习总结——20135308
- node.js学习总结
- js 学习记录（五）11.20总结
- 第二周学习过程总结
- 信息安全系统设计基础第二周学习总结
- JS 样式操作学习总结。
- wkwebview与js通信学习总结(一)
- impress.js学习总结
- JavaScript学习总结一：js常见问题
- JS学习3. 变量和对象总结