简易轮播图制作
程序员文章站
2024-01-18 19:19:46
...
其实这不能算是严格意义上的轮播图，我是借用了DOM HTML来解决的，只有个样子，但是对于新手来说，比较容易做出来，而且不难学`
-----------------------HTML内容-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>good</title>
<link rel="stylesheet" href="good.css" style="text/css">
<meta charset="utf-8">
</head>
<body>
<div id="list">
<div id="div"><img id="img" src="index/1.jpg"></div>
</div>
<div id="ctrl">
<button id="mybutton" onclick="myctrl1()"></button>
<button id="mybutton" onclick="myctrl2()"></button>
<button id="mybutton" onclick="myctrl3()"></button>
<button id="mybutton" onclick="myctrl4()"></button>
<button id="mybutton" onclick="myctrl5()"></button>
</div>
<script>
function myctrl1()
{
document.getElementById("img").src="index/1.jpg";
}
function myctrl2()
{
document.getElementById("img").src="index/2.jpg";
}
function myctrl3()
{
document.getElementById("img").src="index/3.jpg";
}
function myctrl4()
{
document.getElementById("img").src="index/4.jpg";
}
function myctrl5()
{
document.getElementById("img").src="index/5.jpg";
}
</script>
</body>
</html>
-------------------css内容------------------------------------------------------------------------------------
*{
padding:0px;
margin:0px;
text-decoration:none;
}
#div
{
width:1280px;
height:500px;
margin:100px auto;
}
#ctrl
{
width:1050px;
height:15px;
position:relative;
top:-100px;
margin:auto;
}
#mybutton
{
width:209px;
height:15px;
margin-right:1px;
float:left;
background-color:#9E9E9E;
outline:none;
border:0px;
}
#mybutton:hover
{
background-color:#0080FF;
}
上一篇： 如何使用CSS制作节日SVG图标动画
下一篇： 简易模板引擎制作