作業1 切換圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>換圖片</title>
</head>
<body>
<div id="div1">
<img id="bigImg" src="img/picture-1.jpg"/>
</div>
<div id="div2">
<img class="smallImg" id="1" src="img/thumb-1.jpg"/>
<img class="smallImg" id="2" src="img/thumb-2.jpg"/>
<img class="smallImg" id="3" src="img/thumb-3.jpg"/>
</div>
</body>
</html>
<script type="text/javascript">
pictureMessage = [
{id:1,big_img:"img/picture-1.jpg"},
{id:2,big_img:"img/picture-2.jpg"},
{id:3,big_img:"img/picture-3.jpg"}
]
function changeImg(){
imgNode = document.getElementById("bigImg")
for(x=0;x<pictureMessage.length;x++){
if (this.id == pictureMessage[x].id){
imgNode.src = pictureMessage[x].big_img
}
}
}
imgNodes = document.getElementsByClassName("smallImg")
for (x=0;x<imgNodes.length;x++){
imgNode = imgNodes[x]
imgNode.onmouseover = changeImg
}
</script>
效果圖：
homework1 (1).png
homework1(2).png
作業二 閃爍圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
margin-left: 300px;
margin-top: 50px;
height: 400px;
width: 900px;
border: 1px solid black;
}
.btn{
width: 200px;
height: 60px;
background-color: orangered;
color: white;
font-size: 20px;
}
.btn:focus{
outline: 0;
}
#box2{
text-align: center;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
<button id="add" class="btn" onclick="addDiv()">添加</button>
<button id="twinkle" class="btn" >閃爍</button>
</div>
</body>
</html>
<script type="text/javascript" >
addNode = document.getElementById("add")
box1Node = document.getElementById("box1")
function randomColor(){
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
return "rgb("+red+","+green+","+blue+")"
}
function addDiv(){
smallDiv = document.createElement("div")
smallDiv.style.width = "90px"
smallDiv.style.height = "100px"
smallDiv.style.backgroundColor = randomColor()
smallDiv.style.float = "left"
smallDiv.className = "smallDiv"
smallDivs = document.getElementsByClassName("smallDiv")
firstNode = box1Node.firstChild
if(firstNode == null){
box1Node.appendChild(smallDiv)
}
if (smallDivs.length == 40){
smallDivs[smallDivs.length-1].remove()
box1Node.insertBefore(smallDiv,firstNode)
}else{
box1Node.insertBefore(smallDiv,firstNode)
}
}
twinkleNode = document.getElementById("twinkle")
twinkleNode.onclick = twinkleDiv
function twinkleDiv(){
console.log(twinkleNode.innerHTML)
if(twinkleNode.innerHTML == "停止"){
clearInterval(t1)
twinkleNode.innerHTML = "閃爍"
return
}
if(twinkleNode.innerHTML == "閃爍"){
smallDivs = document.getElementsByClassName("smallDiv")
t1 = setInterval(function(){
for (x=0;x<smallDivs.length;x++){
smallDiv = smallDivs[x]
smallDiv.style.backgroundColor = randomColor()
console.log(smallDiv)
}
x = 0
},1000)
}
twinkleNode.innerHTML = "停止"
}
</script>
效果圖：
homewoke2(1).png
homework2(2).png
作業三 輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img{
position: relative;
}
.choose{
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 20px;
background-color: rgba(0,0,0,0);
margin-left:20px ;
}
.choose:focus{
outline: 0;
}
#box2{
position: absolute;
left: 400px;
top: 400px;
}
</style>
</head>
<body>
<div id="box1">
<img id="img" src="img/slide-1.jpg"/>
</div>
<div id="box2">
<button class="choose" id="1"> </button>
<button class="choose" id="2"> </button>
<button class="choose" id="3"> </button>
</div>
</body>
</html>
<script type="text/javascript">
pictureMessage = [
{id:1,img:"img/slide-1.jpg"},
{id:2,img:"img/slide-2.jpg"},
{id:3,img:"img/slide-3.jpg"}
]
imgNode = document.getElementById("img")
index = 0
setInterval(function(){
console.log(index)
imgNode.src = pictureMessage[index].img
if(index == pictureMessage.length-1){
index = 0
}else{
index++
}
},2000)
btnNodes = document.getElementsByClassName("choose")
for (x=0;x<btnNodes.length;x++){
btnNode = btnNodes[x]
btnNode.onmousemove = changeImg
}
function changeImg(){
for (x=0;x<pictureMessage.length;x++){
if(pictureMessage[x].id == this.id){
imgNode.src = pictureMessage[x].img
}
}
}
</script>
效果圖：
homewok3(1).png
homewok3(2).png
