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”
![1]()
- 點擊 “heartstone”
![3]()
- 點擊 “ow”
![4]()
- 點擊 “starcraft”
![4]()
