Javascript Dom 编程艺术

最新推荐文章于 2025-05-05 14:32:57 发布

sa酱

最新推荐文章于 2025-05-05 14:32:57 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx583274568/article/details/45932607

本文介绍了一个简单的图片画廊实现方案，通过HTML、CSS和JavaScript来创建一个动态的图片展示效果。用户可以点击缩略图来更换主展示区的图片，并且会同步更改图片描述。

<pre name="code" class="html">body{
    font-family:"Helvetica","Arial",sans-serif;
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
}
h1{
    color:#333;
    background-color:transparent;

}
a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration:none;
}
ul{
    padding:0;
}
li{
    float:left;
    padding:1em;
    list-style:none;
}
#imagegallery{
    list-style:none;
}
#imagegallery{
   display:inline;
}
#imagegallery li a img{
    border:0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html";charset="utf-8"/>
    <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
 
</head>
<body>
    <h1>Snapshot</h1>
    <ul id="imagegallery">
	<li>
	    <a href="images/1.jpg" title="测试">
	        <img src="images/thumbnail_1.jpg" alt="0.0"/>
	    </a>
	</li>
	<li>
	    <a href="images/5.png" title="an icon"  >
		<img src="images/thumbnail_5.jpg" alt="0.0"/>
	    </a>
	</li>
	<li>
	    <a href="images/lena.bmp" title="bmp"  >
		<img src="images/thumbnail_lena.jpg" alt="0.0"/>
	    </a>
	</li>
	<li>
	    <a href="images/ceshi.jpg" title="人"  >
		<img src="images/thumbnail_ceshi.jpg" alt="0.0"/>
	    </a>
	</li>
    </ul> 
 
</body>
</html>