jQuery第三章课后作业

最新推荐文章于 2022-07-03 15:51:17 发布

VIP文章 suixinCaesar

最新推荐文章于 2022-07-03 15:51:17 发布

阅读量6.2k

点赞数 11

分类专栏： jQuery制作网页高级特效

本文链接：https://blog.csdn.net/suixincaesar/article/details/81108712

版权

3.实现有一个图片和五个数字链接，单击不同的数字链接显示不同的图片。

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>图片轮换</title>
	<link rel="stylesheet" href="css/scroll.css">

</head>

<body>
<div class="scroll">
	<div id="num">
		<a href="#" onmouseover="one()">1</a>
		<a href="#" onmouseover="two()">2</a>
		<a href="#" onmouseover="three()">3</a>
		<a href="#" onmouseover="four()">4</a>
		<a href="#" onmouseover="fifth()">5</a>
	</div>
	<img src="images/1.gif" alt="图片" id="photo"/>
</div>
<script>
	var doc = document.getElementById("photo");
	function one() {
		doc.setAttribute("src","images/1.gif")
    }
    function two() {
        doc.setAttribute("src","images/2.gif")
    }
    function three() {
        doc.setAttribute("src","images/3.jpg")
    }
    function four() {
        doc.setAttribute("src","images/4.jpg")
    }
    function fifth() {
        doc.setAttribute("src","images/5.gif")
    }
</script>
</body>
</html>

最低0.47元/天解锁文章

suixinCaesar

关注

11
点赞
踩
27

收藏

觉得还不错? 一键收藏
5
评论
jQuery第三章课后作业

3.实现有一个图片和五个数字链接，单击不同的数字链接显示不同的图片。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt;&lt;title&gt;图片轮换&lt;/title&gt; &lt;link rel="stylesh
复制链接

扫一扫