1、作业1 轮番效果
//通过document对象获取页面元素的常用方法有5个:
//document.getElementsByById('...') ==> 通过ID获取单个元素
//document.getElementsByTagName('...') ==> 通过标签名获取标签列表
//document.getElementsByClassName('...') ==> 通过类名获取标签列表
//document.querySelector('...') ==> 通过样式表选择器获取单个元素
//document.querySelectorAll('...') ==> 通过样式表选择器获取元素的列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#adv {
width: 940px;
margin: 0 auto;
}
#adv ul {
width: 120px;
height: 30px;
margin: 0 auto;
position: relative;
top: -30px;
}
#adv li {
width: 30px;
height: 30px;
list-style: none;
float: left;
color: #ccc;
cursor: pointer;
}
#adv li:first-child {
color: lightseagreen;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/slide-1.jpg" alt="">
<ul>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
<li class="dot">●</li>
</ul>
</div>
<script>
var img = document.querySelector('#adv>img');
var items = document.querySelectorAll('#adv li');
var timerId = 0;
for (var i = 0; i < items.length; i += 1) {
items[i].index = i;
items[i].addEventListener('mouseover', function(evt) {
index = evt.target.index;
changeItemsColor(index);
img.src = 'img/' + images[index];
if (timerId != 0) {
window.clearInterval(timerId);
timerId = 0;
}
});
items[i].addEventListener('mouseout', startIt);
}
var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
var index = 0;
startIt();
function startIt() {
if (timerId == 0) {
timerId = window.setInterval(function() {
index += 1;
index %= images.length;
changeItemsColor(index);
img.src = 'img/' + images[index];
}, 1000);
}
}
function changeItemsColor(index) {
for (var i = 0; i < items.length; i += 1) {
items[i].style.color = '#ccc';
}
items[index].style.color = 'lightseagreen';
}
</script>
</body>
</html>
2、作业2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 10px 20px;
}
#container li {
float: left;
list-style: none;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<img src="img/picture-1.jpg" alt="">
<ul id="items">
<li><img src="img/thumb-1.jpg" alt="" onclick=""></li>
<li><img src="img/thumb-2.jpg" alt="" onclick=""></li>
<li><img src="img/thumb-3.jpg" alt="" onclick=""></li>
</ul>
</div>
<script>
var img = document.querySelector('#container>img');
var images = document.querySelectorAll('#items img');
for (var i = 0; i < images.length; i += 1) {
//事件回调函数在for循环的时候没有执行所以也取不到循环变量i当前的值
//TavaScript是动态类型语言可以在运行时动态的添加(或删除)对象的属性
images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
images[i].addEventListener('mouseover', function(evt) {
img.src = evt.target.picture;
});
}
</script>
</body>
</html>
