1.作业一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业一</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="div">
<img src="img/picture-1.jpg"/>
</div>
<img class="img1" id="img/picture-1.jpg" src="img/thumb-1.jpg" alt="" />
<img class="img1" id="img/picture-2.jpg" src="img/thumb-2.jpg" alt="" />
<img class="img1" id="img/picture-3.jpg" src="img/thumb-3.jpg" alt="" />
</body>
<script>
// img1RltImg = [
// {img11: "img/picture-1.jpg"},
// {img12: "img/picture-2.jpg"},
// {img13: "img/picture-3.jpg"}
// ]
// console.log($('#div img')[0].src)
for (x=0;x<$('.img1').length;x++){
$('.img1')[x].onmouseover = function(){
$('#div img')[0].src = this.id
}
}
</script>
</html>
2. 作业二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业二</title>
<style type="text/css">
#box1{
width: 1000px;
height: 500px;
border: 1px solid black;
margin-left: 200px;
margin-top: 20px;
}
#box2{
margin-top: 10px;
position: relative;
/*width: 700px;*/
height: 40px;
/*background-color: yellow;*/
text-align: center;
}
button{
/*position: absolute;*/
margin-top:5px:
margin-left:3px;
width: 80px;
height: 40px;
background-color: rgb(255,10,10);
color: white;
border: 0;
font-size: 20px;
}
button:focus{
outline:0;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/tool.js"></script>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
<button id="addbtn">添加</button>
<button id="flicker">闪烁</button>
</div>
<script>
console.log($('<div style="color: red">我是div</div>')[0])
console.log($('#box1')[0])
// addDivNode = $('<div></div>')
// addDivNode[0].style = 'float: left;width: 50px;height: 50px;'+'background-color: '+randomColor()
// $('#box1').append(addDivNode)
$('#addbtn')[0].onclick = function(){
//当颜色方块达到上限时删除最后一个方块
if ($('#box1>div').length == 50){
$('#box1>div')[49].remove()
}
// console.log($('#box1>div'))
//添加颜色方块
addDivNode = $('<div></div>')
addDivNode[0].style = 'float: left;width: 100px;height: 100px;'+'background-color: '+randomColor()
$('#box1').prepend(addDivNode)
// console.log($('#box1>div'))
}
// function func11(){
// console.log("==================")
// }
// $($('#flicker')[0]).on('click',func11)
// $($('#flicker')[0]).on('click',function(){
// t1 = setInterval(function(){
//
// for (x=0;x<$('#box1>div').length;x++){
// console.log($('#box1>div')[x])
//// if (x==3){
//// clearInterval(t1)
//// }
// $('#box1>div')[x].style = "float: left;width: 100px;height: 100px;background-color: white"
// }
// },2000)
// })
</script>
</body>
</html>
3. 作业三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
text-align:center;
}
#box2{
text-align: center;
}
input{
margin-left:30px;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="box1">
<img src="img/slide-1.jpg"/>
</div>
<div id="box2">
<input type="radio" id="1"/>
<input type="radio" id="2"/>
<input type="radio" id="3"/>
<input type="radio" id="4"/>
</div>
<script>
num = 0
function slidePicture(){
num++
if (num==1){
$('#4')[0].checked = ""
$('#'+num)[0].checked = "checked"
}else{
$('#'+(num-1))[0].checked = ""
$('#'+num)[0].checked = "checked"
}
$('img')[0].src = "img/slide-"+num+".jpg"
if (num+1==5){
num = 0
}
}
t1 = setInterval(slidePicture,1000)
//鼠标悬停和离开事件没有完善，存在bug
for (x=0;x<$('input').length;x++){
$('input')[x].onmouseover = function (){
$('#'+num)[0].checked = ""
$('#'+x)[0].checked = "checked"
clearInterval(t1)
}
}
for (x=0;x<$('input').length;x++){
$('input')[x].onmouseout = function (){
$('#'+num)[0].checked = ""
$('#'+x)[0].checked = "checked"
t1 = setInterval(slidePicture,1000)
}
}
</script>
</body>
</html>
