Github：image_ads_JQ
一. 需求
设计一个图片广告位，默认只有一个图片，图片下方有不同按钮，点击按钮能够更换广告图片，每个图片对应要跳转的链接不同。
二. 代码
image_ads_JQ.html
<!DOCTYPE html>
<html>
<head>
<title>图片广告位</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="image_ads_JQ.css" />
</head>
<body>
<div>
<a href="https://www.wowchina.com/zh-cn/"><img src="imgs/wow.png" /></a><br />
<button>wow</button>
<button>heartstone</button>
<button>ow</button>
<button>starcraft</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="image_ads_JQ.js"></script>
</html>
省略 image_ads_JQ.css ?
image_ads_JQ.js
var links = ["https://www.wowchina.com/zh-cn/", "http://hs.blizzard.cn/home", "http://ow.blizzard.cn/home", "http://sc2.blizzard.cn/home"];
var imgs = ["imgs/wow.png", "imgs/heartstone.png", "imgs/ow.png", "imgs/starcraft.png"];
$(document).ready(function() {
$("button").click(function() {
var index = $("button").index(this);
$("a").attr("href", links[index]);
$("img").attr("src", imgs[index]);
});
});
三. 效果
点击图片跳转至相应的链接。
- 默认/点击 “wow”
- 点击 “heartstone”
- 点击 “ow”
- 点击 “starcraft”
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
