图片翻转

最新推荐文章于 2025-08-08 14:49:07 发布

lnn2007

最新推荐文章于 2025-08-08 14:49:07 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

文章标签： iphone function xhtml border float class

本文链接：https://blog.youkuaiyun.com/lnn2007/article/details/8058854

本文介绍了一个简单的HTML与jQuery结合实现图片轮播效果的方法，包括样式设计、事件监听与DOM操作，旨在帮助开发者快速掌握基本的前端交互技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
	#holdspace{
		width:310px;
		height:250px; 
		border:1px solid black;
	}
	img{
		width:300px;
		height:240px;
	}
	.imageIndex ul li{
		float:left;
		width:20px;
		height:20px;
		text-align:center;
		color:blue;
	}
	.imageIndex ul{
		list-style:none;
		float:right;
	}
	div.imageIndex{
		width:310px;
		margin-top:5px;
	}
</style>
<script src="jquery.js"></script>
<script>
	var images = ["iphone4.bmp","iphone4s.bmp","iphone5.bmp"];
	$(document).ready(function(){
		$(".imageIndex li").mouseenter(function(){
			var index = $(this).text();
			index = parseInt(index)-1;
			$("#holdspace img").attr("src",images[index])
			.css("display","none")
			.fadeIn(500);
		});
	});
</script>
</head>

<body>
	<div id="holdspace">
		<img src="iphone4.bmp" />
	</div>
	<div class="imageIndex">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</body>
</html>

只是一个简单的效果！

图片的格式不支持，汗了一把（bmp在这里应该是支持的）