JavaWeb：（练习）七、JavaScript-图片切换练习
JavaWeb：（练习）七、JavaScript-图片切换练习
一、图片切换练习
1、练习目标
完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作。每5秒自动切换，重复，循环自动轮播,即可自动切换,同时也可以点击按钮切换到指定图片)。
2、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
<link href="Demo.css" rel="stylesheet" type="text/css" />
<script src="Demo.js" type="text/javascript"></script>
</head>
<body>
<div id="box_id" class="box" onm ouseover="onMouseOver()" onm ouseout="onMouseOut()">
<input type="button" id="button_left_id" class="button_left" value="<" onclick="clickButtonLeft()" />
<input type="button" id="button_right_id" class="button_right" value=">" onclick="clickButtonRight()" />
</div>
</body>
</html>
3、CSS代码
*{
margin: 0;
padding: 0;
}
.box{
width: 520px;
height: 280px;
border-radius: 30px;
background-image: url(../img/a.jpg);
margin: auto;
margin-top: 100px;
padding: 0px;
}
img{
border-radius: 30px;
opacity: 1;
float: left;
}
input{
border: 0px white solid;
width: 40px;
height: 40px;
color: grey;
font-size: 25px;
opacity: 0;
float: left;
margin-top: 125px;
}
.button_left{
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.button_right{
margin-left: 440px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
4、js代码
var t;
t = setInterval("changePicture()",5000);
var i = 0;
var pictureArrays = ["url('../img/a.jpg')", "url('../img/b.jpg')", "url('../img/c.jpg')", "url('../img/d.jpg')", "url('../img/e.jpg')"];
function changePicture() {
document.getElementById("box_id").style.backgroundImage = pictureArrays[i++];
if (i>4) {
i=0;
}
}
function onm ouseOver() {
clearInterval(t);
document.getElementById("button_left_id").style.opacity = 0.5;
document.getElementById("button_right_id").style.opacity = 0.5;
}
function onm ouseOut() {
t = setInterval("changePicture()",5000);
document.getElementById("button_left_id").style.opacity = 0;
document.getElementById("button_right_id").style.opacity = 0;
}
function clickButtonLeft() {
changePicture();
}
function clickButtonRight() {
changePicture();
}