标签：JavaScript JavaWeb img 练习 切换 图片 border left
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();
}
5、网页结果
标签：JavaScript,JavaWeb,img,练习,切换,图片,border,left 来源： https://blog.csdn.net/qq_44125436/article/details/123066646
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。