使用JQuery快速高效制作网页交互特效第三章所有课后

最新推荐文章于 2019-12-09 19:33:27 发布

不觉清倦

最新推荐文章于 2019-12-09 19:33:27 发布

阅读量1.6k

点赞数 1

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44269168/article/details/95206327

版权

本教程详细讲解了如何使用JQuery高效地创建网页交互特效，包括多个简答部分，涵盖了样式调整和代码实现，帮助开发者提升网页动态效果的制作能力。

摘要由CSDN通过智能技术生成

简答三
样式


.scroll {
    width: 360px;
    height: 190px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

a {
    font-size: 14px;
    color: #39F;
    height: 18px;
    width: 20px;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
    float: left;
    margin-right: 5px;
    text-align: center;
    background-color: #FFF;
    line-height: 20px;
}

a:hover {
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #39F;
    border: 1px solid #39F;
    text-decoration: none;
    display: block;
}

#num {
    position: absolute;
    width: 180px;
    height: 25px;
    z-index: 2;
    left: 100px;
    top: 165px;
}

代码

<!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="#" onclick="change1()">1</a>
		<a href="#" onclick="change2()">2</a>
		<a href="#" onclick="change3()">3</a>
		<a href="#" onclick="change4()">4</a>
		<a href="#" onclick="change5()">5</a>
	</div>
	<img src="../Image/1.gif" alt="图片" id="photo"/>
</div>
<script type="text/javascript">
	//替换图片
	var img = document.getElementById("photo")
	function change1() {

		img.src = "../Image/1.gif";
	}