简易轮播图制作

最新推荐文章于 2024-04-15 10:28:24 发布

卡门来打帝骑

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量223

点赞数 1

分类专栏：个人设计文章标签： HTML js 小白

本文链接：https://blog.csdn.net/lialia_200/article/details/89844667

版权

个人设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

其实这不能算是严格意义上的轮播图，我是借用了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;
}