Study address:
- Grain Academy-Shang Silicon Valley
- Bilibili website——Silicon Valley's latest version of JavaScript basic full set of tutorials (140 episodes of practical teaching, JS from entry to master)
table of Contents
P125 125. Shang Silicon Valley_JS Foundation_History 11:21
P126 126. Shang Silicon Valley_JS Foundation_Location 11:44
P127 127. Shang Silicon Valley_JS Basics_Introduction to Timer 17:23
clearInterval(): Close a timer
P128 128.Silicon Valley_JS Basic_Switching Picture Exercise 20:53
P129 129. Shang Silicon Valley_JS Basics_Modify div mobile exercise 10:21
P130 130.Silicon Valley_JS Basics_Delay Call 05:47
P131 131. Shang Silicon Valley_JS Basics_Timer Application (1) 22:33
P132 132. Shang Silicon Valley_JS Basics_Timer Application (2) 17:11
P133 133. Shang Silicon Valley_JS Basics_Timer Application (3) 20:17
Each control its own timer without interfering with each other
obj.style[xxx] and obj.style.xxx
P134 134.Silicon Valley_JS Basic_Complete the carousel interface 34:49
P135 135.Silicon Valley_JS Basic_Finish, click the button to switch pictures 17:08
P124 124. Shang Silicon Valley_JS Foundation_Navigator 41:16
GOOD
- Browser object model.
- BOM allows us to operate the browser through JS.
- A set of objects are provided for us in the BOM to complete the operation of the browser.
- BOM object
- Window: Represents the window of the entire browser, and window is also a global object in the web page.
- Navigator: Represents the information of the current browser, through which different browsers can be identified.
- Location: Represents the address bar information of the current browser. You can obtain the address bar information through Location, or operate the browser to jump to the page.
- History: Represents the history of the browser. The history of the browser can be manipulated through this object. Due to privacy reasons, the object cannot obtain specific historical records, and can only operate the browser to turn pages forward or backward. And this operation is only valid during the current visit.
- Screen: Represents the information of the user's screen, through which the relevant information of the user's display can be obtained.
These BOM objects (global objects) are saved as attributes of the window object in the browser, and can be used through the window object or directly.
Window object properties
Browser object
Navigator object properties
Navigator
- Represents the information of the current browser through which different browsers can be identified.
- Due to historical reasons, most of the attributes in the Navigator object can no longer help us identify the browser.
- Generally, we only use userAgent to determine browser information. UserAgent is a string that contains content used to describe browser information. Different browsers will have different userAgents.
- Firefox's userAgent : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
- Chrome的userAgent：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
- IE8：Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE9：Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
- IE11 : Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C;. NET4.0E; rv:11.0) like Gecko. In IE11, Microsoft and IE-related logos have been removed, so we can basically no longer use UserAgent to identify whether a browser is IE.
!!:! Take the opposite, the two are the opposite, but will be converted to Boolean type.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
alert(navigator.appName);
var ua = navigator.userAgent;
console.log(ua);
if (/firefox/i.test(ua)) {
alert("你是火狐！！！");
} else if (/chrome/i.test(ua)) {
alert("你是Chrome");
} else if (/msie/i.test(ua)) {
alert("你是IE浏览器~~~");
} else if ("ActiveXObject" in window) {
alert("你是IE11，枪毙了你~~~");
}
/*
* 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
* 比如：ActiveXObject
*/
// window.ActiveXObject：没有，返回undefined;ActiveXObject没有则会报错
if ("ActiveXObject" in window) {
alert("你是IE，我已经抓住你了~~~");
} else {
alert("你不是IE~~~");
}
/*alert("ActiveXObject" in window);*/
</script>
</head>
<body>
</body>
</html>P125 125. Shang Silicon Valley_JS Foundation_History 11:21
History object
- length attribute: get the number of links that are regarded as visits
- back(): Go back to the previous page, the function is the same as the back button of the browser
- forward(): Jump to the next page, the effect is the same as the forward button of the browser
- go(): can be used to jump to the specified page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
console.log(history);
/*
* History
* - 对象可以用来操作浏览器向前或向后翻页
*/
window.onload = function() {
//获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function() {
/*
* length
* - 属性，可以获取到当成访问的链接数量
*/
//alert(history.length);
/*
* back()
* - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
//history.back();
/*
* forward()
* - 可以跳转下一个页面，作用和浏览器的前进按钮一样
*/
//history.forward();
/*
* go()
* - 可以用来跳转到指定的页面
* - 它需要一个整数作为参数
* 1:表示向前跳转一个页面 相当于forward()
* 2:表示向前跳转两个页面
* -1:表示向后跳转一个页面
* -2:表示向后跳转两个页面
*/
history.go(-2);
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>History</h1>
<a href="01.BOM.html">去BOM</a>
</body>
</html>P126 126. Shang Silicon Valley_JS Foundation_Location 11:44
Location object
- Location: This object encapsulates the information of the browser's address bar.
- assign(): Used to jump to other pages, the effect is the same as directly modifying location.
- reload(): Used to reload the current page, the function is the same as the refresh button.
- replace(): You can replace the current page with a new page, and the page will be redirected after the call.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Location
* - 该对象中封装了浏览器的地址栏的信息
*/
window.onload = function() {
//获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function() {
//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
alert(location);
/*
* 如果直接将location属性修改为一个完整的路径，或相对路径
* 则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
//location = "http://www.baidu.com";
//location = "01.BOM.html";
/*
* assign()
* - 用来跳转到其他的页面，作用和直接修改location一样
*/
//location.assign("http://www.baidu.com");
/*
* reload()
* - 用于重新加载当前页面，作用和刷新按钮一样
* - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
*/
//location.reload(true);
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* 不会生成历史记录，不能使用回退按钮回退
*/
location.replace("01.BOM.html");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>Location</h1>
<input type="text" />
<a href="01.BOM.html">去BOM</a>
</body>
</html>P127 127. Shang Silicon Valley_JS Basics_Introduction to Timer 17:23
Screen object
Window object
setInterval(): regular call
clearInterval(): Close a timer
setInterval()
- Timed call
- You can execute a function at intervals
- Parameters: 1. Callback function, this function will be called once every certain period of time; 2. The time between each call, in milliseconds.
- Return value: Return a Number type data, this number is used as the unique identifier of the timer.
clearInterval()
- It can be used to turn off a timer. The method requires a timer identifier as a parameter, so that the timer corresponding to the identifier will be turned off.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
//获取count
var count = document.getElementById("count");
//使count中的内容，自动切换
/*
* JS的程序的执行速度是非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*/
/* for (var i = 0; i < 10000; i++) {
count.innerHTML = i;
alert("hello");
} */
/*
* setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1.回调函数，该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*/
var num = 1;
var timer = setInterval(function() {
count.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}, 1000);
console.log(timer);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>P128 128.Silicon Valley_JS Basic_Switching Picture Exercise 20:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
/*
* 使图片可以自动切换
*/
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量，用来保存定时器的标识
var timer;
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，这就导致图片的切换速度过快，
* 并且我们只能关闭最后一次开启的定时器
*/
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
/*
* 开启一个定时器，来自动切换图片
*/
timer = setInterval(function() {
//使索引自增
index++;
//判断索引是否超过最大索引
/*if(index >= imgArr.length){
//则将index设置为0
index = 0;
}*/
index %= imgArr.length;
//修改img1的src属性
img1.src = imgArr[index];
}, 1000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//点击按钮以后，停止图片的自动切换，关闭定时器
/*
* clearInterval()可以接收任意参数，
* 如果参数是一个有效的定时器的标识，则停止对应的定时器
* 如果参数不是一个有效的标识，则什么也不做
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" />
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>P129 129. Shang Silicon Valley_JS Basics_Modify div mobile exercise 10:21
Use "timer" to solve the problem of block movement stuck . The general idea: separate control of direction and speed . The keyboard controls the direction and the speed is controlled by the timer.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键，div向左移
* 按右键，div向右移
* 。。。
*/
window.onload = function() {
//定义一个变量，来表示移动的速度
var speed = 10;
//创建一个变量表示方向
//通过修改dir来影响移动的方向
var dir = 0;
//开启一个定时器，来控制div的移动
setInterval(function() {
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch (dir) {
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
}, 30);
//为document绑定一个按键按下的事件
document.onkeydown = function(event) {
event = event || window.event;
//当用户按了ctrl以后，速度加快
if (event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于按键的值
dir = event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup = function() {
//设置方向为0
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>P130 130.Silicon Valley_JS Basics_Delay Call 05:47
Delayed call
- Delay calling a function is not executed immediately, but executed after a certain period of time, and only executed once.
- The difference between delayed call and timed call, timed call will be executed multiple times, while delayed call will only be executed once .
- Delay call and timing call can actually replace each other, and you can choose according to your needs during development.
P131 131. Shang Silicon Valley_JS Basics_Timer Application (1) 22:33
parseInt(): Extract the legal numbers in the string .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
#box2 {
width: 0;
height: 1000px;
border-left: 1px black solid;
position: absolute;
left: 800px;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//定义一个变量，用来保存定时器的标识
var timer;
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function() {
//关闭上一个定时器
clearInterval(timer);
//开启一个定时器，用来执行动画效果
timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(box1, "left"));
//在旧值的基础上增加
var newValue = oldValue + 11;
//判断newValue是否大于800
if (newValue > 800) {
newValue = 800;
}
//将新值设置给box1
box1.style.left = newValue + "px";
// //当元素移动到800px时，使其停止执行动画
// if (newValue == 800) {
// //达到目标，关闭定时器
// clearInterval(timer);
// }
}, 30);
};
};
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>P132 132. Shang Silicon Valley_JS Basics_Timer Application (2) 17:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
#box2 {
width: 0;
height: 1000px;
border-left: 1px black solid;
position: absolute;
left: 800px;
top: 0;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function() {
move(box1, 800, 10);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function() {
move(box1, 0, 10);
};
};
var timer; // 定义一个变量，用来保存定时器的标识
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
*/
function move(obj, target, speed) {
clearInterval(timer); // 关闭上一个定时器
var current = parseInt(getStyle(obj, "left")); // 获取元素目前的位置
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if (current > target) {
//此时速度应为负值
speed = -speed;
}
timer = setInterval(function() { // 开启一个定时器，用来执行动画效果
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, "left"));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style.left = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if (newValue == target) {
//达到目标，关闭定时器
clearInterval(timer);
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>P133 133. Shang Silicon Valley_JS Basics_Timer Application (3) 20:17
Each control its own timer without interfering with each other
obj.style[xxx] and obj.style.xxx
Original link: https://www.jianshu.com/p/1e73b8e1b31d Use dots for constants and square brackets for variables. .There are restrictions, [] can manipulate special attribute names.
Callback function callback()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 200px;
}
#bigBox {
width: 0;
height: 1000px;
border-left: 1px black solid;
position: absolute;
left: 800px;
top: 0;
}
</style>
<!-- <script type="text/javascript" src="js/tools.js"></script> -->
<script type="text/javascript">
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
clearInterval(obj.timer); // 关闭上一个定时器
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if (current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed; // 在旧值的基础上增加
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if (newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
window.onload = function() {
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//获取btn03
var btn03 = document.getElementById("btn03");
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function() {
move(box1, "left", 800, 20);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function() {
move(box1, "left", 0, 10);
};
btn03.onclick = function() {
move(box2, "left", 800, 10);
};
//测试按钮
var btn04 = document.getElementById("btn04");
btn04.onclick = function() {
// move(box2 ,"width", 800 , 10);
// move(box2 ,"top", 800 , 10);
// move(box2 ,"height", 800 , 10);
move(box2, "width", 800, 10, function() {
move(box2, "height", 400, 10, function() {
move(box2, "top", 0, 10, function() {
move(box2, "width", 100, 10, function() {
});
});
});
});
};
};
//定义一个变量，用来保存定时器的标识 // var timer;
/*
* 目前我们的定时器的标识由全局变量timer保存，所有正在执行的定时器都在这个变量中保存
*/
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div id="bigBox"></div>
</body>
</html>P134 134.Silicon Valley_JS Basic_Complete the carousel interface 34:49
overflow: After hidden, the part that exceeds the frame horizontally will not occupy the position of other elements after being cropped.
P135 135.Silicon Valley_JS Basic_Finish, click the button to switch pictures 17:08
You can directly add a transition: all .5s in the css style ul list (.5s is the excessive animation time, you can change it at will).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer { /* 设置outer的样式 */
width: 520px; /* 设置宽和高 */
height: 333px;
margin: 50px auto; /*居中*/
background-color: greenyellow; /*设置背景颜色*/
padding: 10px 0; /*设置padding*/
position: relative; /*开启相对定位*/
overflow: hidden; /*裁剪溢出的内容*/
}
#imgList { /*设置imgList*/
list-style: none; /*去除项目符号*/
/*设置ul的宽度*/
/*width: 2600px;*/
position: absolute; /*开启绝对定位*/
/* 每向左移动520px，就会显示到下一张图片 */
left: 0px; /*设置偏移量*/
}
#imgList li { /*设置图片中的li*/
float: left; /*设置浮动*/
margin: 0 10px; /*设置左右外边距*/
}
#navDiv { /*设置导航按钮*/
position: absolute; /*开启绝对定位*/
bottom: 15px; /*设置位置*/
/*设置left值
outer宽度 520
navDiv宽度 25*5 = 125
(520 - 125)/2 = 395/2 = 197.5
* */
/*left: 197px;*/
}
#navDiv a {
float: left; /*设置超链接浮动*/
width: 15px; /*设置超链接的宽和高*/
height: 15px;
background-color: red; /*设置背景颜色*/
margin: 0 5px; /*设置左右外边距*/
opacity: 0.5; /*设置透明*/
filter: alpha(opacity=50);/*兼容IE8透明*/
}
#navDiv a:hover { /*设置鼠标移入的效果*/
background-color: black;
}
</style>
<!--引用工具-->
<!-- <script type="text/javascript" src="js/tools.js"></script> -->
<script type="text/javascript">
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
clearInterval(obj.timer); // 关闭上一个定时器
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if (current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed; // 在旧值的基础上增加
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if (newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
window.onload = function() {
//获取imgList
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 520 * imgArr.length + "px";
/*设置导航按钮居中*/
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor = "black";
/*
点击超链接切换到指定的图片
点击第一个超链接，显示第一个图片
点击第二个超链接，显示第二个图片
* */
//为所有的超链接都绑定单击响应函数
for (var i = 0; i < allA.length; i++) {
//为每一个超链接都添加一个num属性
allA[i].num = i;
//为超链接绑定单击响应函数
allA[i].onclick = function() {
//获取点击超链接的索引,并将其设置为index
index = this.num;
//切换图片
/*
* 第一张 0 0
* 第二张 1 -520
* 第三张 2 -1040
*/
//imgList.style.left = -520*index + "px";
//设置选中的a
setA();
//使用move函数来切换图片
move(imgList, "left", -520 * index, 20, function() {
});
};
}
//创建一个方法用来设置选中的a
function setA() {
//遍历所有a，并将它们的背景颜色设置为红色
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
};
</script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>Come on, go for it~ Believe in yourself, improve yourself~