我已经获得了两个关于如何执行此操作的示例，但两者都没有做我想要做的事情。我的网站应包括:
- 旋转图像横幅(3 张图像)，每隔几秒更改一次
- 每个图片都应该是可点击的，并将您重定向到不同的网址
在我们最近的讲座中，教授在黑板上写下了这段代码，并说你就是这样做的。但是，它对我不起作用。
<html>
<head>
<script language=JAVASCRIPT type=TEXT/JAVASCRIPT>
//I'm not sure when to use '' or ""
//I replaced some of the "picture.jpg" images with links to images. I'm not sure if I used the right syntax.
adImages = new Array("https://i.picsum.photos/id/666/800/200.jpg",
"https://i.picsum.photos/id/420/800/200.jpg",
"https://i.picsum.photos/id/888/800/200.jpg");
adURL = new Array("https://google.com","https://github.com","https://stackoverflow.com");
thisAd = 0;
//length of what?
imgCt = adImages.length;
function rotate()
{
if (document.images)
{
thisAd++;
//Is it better practice to use "==="?
if (thisAd == imgCt)
{
thisAd = 0;
}
document.adBanner.src=adImages[thisAd];
setTimeout("rotate()", 2 * 1000);
}
}
function newLocation()
{
document.location.href = adURL[thisAd];
}
</script>
</head>
//I don't understand what this is at all
<body onload=rotate()>
//Apparently <center> is obsolete?
<center>
<p><font size=4>Rotating Banner <font color=#ff0000>Assignment 6</font> Rotate Party -
Udemy</font>
</p>
<a href="javascript:newLocation()"><IMG height=105 alt="Ad Banner"
src="https://i.picsum.photos/id/666/800/200.jpg" width=610 name=adBanner></a>
</center>
</body>
</html>
请注意。过去几周，我一直在 Reddit 上发布类里面的幻灯片，收到了很多关于内容严重过时的评论。如果可以的话，请给我提供比您看到的我所学的更现代或更好的实践的示例。如果您有兴趣，可以在这里找到有关我在社区大学学习 JavaScript 的经历的对话:https://www.reddit.com/user/gettupled/
我们得到的第二个例子是一个 YouTube 视频，其中给出了以下示例。但是，它不包括单击图像并将其发送到 URL 的选项。我不确定在消息正文中发布 HTML、CSS 和 Javascript 代码是否常见，因此除非另有说明，否则我只会附加一个代码笔。此代码来自 Travesy Media。
https://codepen.io/vitalwheat/pen/QWbEyqN
谢谢大家。这是我在此的头一篇博文。你好。
最佳答案
有很多方法可以实现这一点。这是其中一种方法。
(function() {
"use strict";
const imageList = [
"https://i.picsum.photos/id/666/800/200.jpg",
"https://i.picsum.photos/id/420/800/200.jpg",
"https://i.picsum.photos/id/888/800/200.jpg"
];
const urlList = [
"https://google.com",
"https://github.com",
"https://stackoverflow.com"
];
function createRotatingBanner(rotationTime) {
const $adsBanner = document.querySelector(".adBanner");
let $bannerList;
let currentBannerRendered = 0;
function renderBanner() {
Array.from($bannerList).forEach((banner, bannerIndex) => {
banner.className = bannerIndex === currentBannerRendered ? "" : "hide";
});
currentBannerRendered = (currentBannerRendered+1)%$bannerList.length;
}
// creating Banner image and setting them to hide
function createBanner() {
const fragement = new DocumentFragment();
imageList.forEach((image, index) => {
const banner = document.createElement("img");
banner.src = image;
// wrapping image with anchor element
const anchor = document.createElement("a");
anchor.href = urlList[index];
// hide all the banner
anchor.className = "hide"
anchor.appendChild(banner);
fragement.appendChild(anchor);
});
const cloneFragement = [...fragement.children];
$adsBanner.appendChild(fragement);
return cloneFragement;
}
$bannerList = createBanner();
renderBanner();
setInterval(renderBanner, rotationTime);
}
createRotatingBanner(2000);
})();.hide {
display: none;
}<div class="adBanner"></div>关于javascript - 横幅旋转图像。单击时每个图像都会发送到不同的 URL(vanilla javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60273552/