相思湖学院 15级JS课程
2017-11-22 18:20
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换作业</title>
<style>
*{padding:0;margin:0;}
body>div
{
border:7px solid lightgrey;
height:600px;
width:600px;
margin: 40px auto;
position: relative;
}
div>p
{
display:inline-block;
background-color:white;
font-size:40px;
font-weight:bold;
color:black;
position:absolute;
padding:0 10px;
}
div>img{
width:600px;
height:600px;
position: absolute;
}
#pre{
left:0;
top:50%;
}
#next{
left:100%;
margin-left:-41px;
top:50%;
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<p id="pre"> < </p>
<p id="next"> > </p>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
var img=1;
$("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);
var next=function ()
{
$("div>img:nth-child("+img+")").css("opacity",0);
img++;
if(img>5)
{
img=1;
}
$("div>img:nth-child("+img+")").css("opacity",1);
}
var auto=setInterval(next,3000);
var pre=function ()
{
$("div>img:nth-child("+now+")").css("opacity",0);
img--;
if(img<1)
{
img=5;
}
$("div>img:nth-child("+img+")").css("opacity",1);
}
$("#next")[0].onclick=next;
$("#pre")[0].onclick=pre;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换作业</title>
<style>
*{padding:0;margin:0;}
body>div
{
border:7px solid lightgrey;
height:600px;
width:600px;
margin: 40px auto;
position: relative;
}
div>p
{
display:inline-block;
background-color:white;
font-size:40px;
font-weight:bold;
color:black;
position:absolute;
padding:0 10px;
}
div>img{
width:600px;
height:600px;
position: absolute;
}
#pre{
left:0;
top:50%;
}
#next{
left:100%;
margin-left:-41px;
top:50%;
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<p id="pre"> < </p>
<p id="next"> > </p>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
var img=1;
$("div>img:not(div>img:nth-child("+img+"))").css("opacity",0);
var next=function ()
{
$("div>img:nth-child("+img+")").css("opacity",0);
img++;
if(img>5)
{
img=1;
}
$("div>img:nth-child("+img+")").css("opacity",1);
}
var auto=setInterval(next,3000);
var pre=function ()
{
$("div>img:nth-child("+now+")").css("opacity",0);
img--;
if(img<1)
{
img=5;
}
$("div>img:nth-child("+img+")").css("opacity",1);
}
$("#next")[0].onclick=next;
$("#pre")[0].onclick=pre;
</script>
</body>
</html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换作业</title> <style> *{padding:0;margin:0;} body>div { border:7px solid lightgrey; height:600px; width:600px; margin: 40px auto; position: relative; } div>p { display:inline-block; background-color:white; font-size:40px; font-weight:bold; color:black; position:absolute; padding:0 10px; } div>img{ width:600px; height:600px; position: absolute; } #pre{ left:0; top:50%; } #next{ left:100%; margin-left:-41px; top:50%; } </style></head> <body> <div> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <p id="pre"> < </p> <p id="next"> > </p> </div> <script src="js/jquery-3.2.1.js"></script> <script> var img=1; $("div>img:not(div>img:nth-child("+img+"))").css("opacity",0); var next=function () { $("div>img:nth-child("+img+")").css("opacity",0); img++; if(img>5) { img=1; } $("div>img:nth-child("+img+")").css("opacity",1); } var auto=setInterval(next,3000); var pre=function () { $("div>img:nth-child("+now+")").css("opacity",0); img--; if(img<1) { img=5; } $("div>img:nth-child("+img+")").css("opacity",1); } $("#next")[0].onclick=next; $("#pre")[0].onclick=pre; </script> </body>
</html>
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。
提交了 相思湖学院 15级JS课程 任务 图片自动切换、点击切换效果 的任务作业。