51工具盒子英文:
Is it possible to work two different javascript queries for different functionality on single HTML section?
问题 {#heading}
以下是您提供的HTML和JavaScript代码的翻译：
我已经创建了一个HTML部分。在这个部分中，我在一个div标记中使用了两个容器，并将其设置为flex，以便最终的容器会显示在左边和右边。在左边的容器中，我从上到下创建了三个卡片，而在右边的容器中，我插入了三个图片并将它们设置为绝对定位，以便它们彼此重叠。我使用了一个JavaScript查询，以便在5秒的间隔内显示其他图片，并将左边的容器设置为不可见。但我想再使用一个查询，在其中，我希望在悬停在任何卡片上时，该卡片对应的图片会变为可见。例如，如果第二/第三张图片可见，而我悬停在第一个卡片上，那么第一个图片应该出现。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- JavaScript 代码 -->
var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}, 5000);
// 为第一张图片
function change1() {
document.getElementById("img1").src = "images/50k.png";
}
function change2() {
document.getElementById("img1").src = "images/50k.png";
}
// 为第二张图片
function change3() {
document.getElementById("img2").src = "images/insta-pic.png";
}
function change4() {
document.getElementById("img2").src = "images/insta-pic.png";
}
// 为第三张图片
function change5() {
document.getElementById("img3").src = "images/stats.png";
}
function change6() {
document.getElementById("img3").src = "images/stats.png";
}
<!-- CSS 代码 -->
.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}
<!-- HTML 代码 -->
<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card" onmouseover="change1()" onmouseout="change2()">
<h2>why1</h2>
</div>
<div class="card" onmouseover="change3()" onmouseout="change4()">
<h2>why2</h2>
</div>
<div class="card" onmouseover="change5()" onmouseout="change6()">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="images/50k.png" alt="img1" id="img1" class="visible">
<img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
<img src="images/stats.png" alt="img3" id="img3" class="hidden">
</div>
</div>
<!-- 结束代码片段 -->
请注意，这是您提供的代码的翻译版本，其中包括HTML、JavaScript和CSS。如果您有任何其他疑问或需要进一步的帮助，请随时提出。 英文:
I have made an HTML section. In this section, I have used two containers in a div tag and made it flex so that the final containers would be visible left and right. In the left container, I made three card from top to bottom, and in the right container, I inserted the three images and made them position absolute, so that it will be on one to another. I have used one JavaScript query so that in 5 seconds intervals other images will be visible and the left should be displayed none. But I want to use one more query, and in that, I want functionality that whenever I hover on any card that card's respective image should be visible. For example, if the second/third image is visible and I hover over the first card then the first image should appear.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}, 5000);
// for first image
function change1() {
document.getElementById("img1").src = "images/50k.png";
}
function change2() {
document.getElementById("img1").src = "images/50k.png";
}
// for second image
function change3() {
document.getElementById("img2").src = "images/insta-pic.png";
}
function change4() {
document.getElementById("img2").src = "images/insta-pic.png";
}
// for third image
function change5() {
document.getElementById("img3").src = "images/stats.png";
}
function change6() {
document.getElementById("img3").src = "images/stats.png";
}
<!-- language: lang-css -->
.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}
<!-- language: lang-html -->
<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card" onmouseover="change1()" onmouseout="change2()">
<h2>why1</h2>
</div>
<div class="card" onmouseover="change3()" onmouseout="change4()">
<h2>why2</h2>
</div>
<div class="card" onmouseover="change5()" onmouseout="change6()">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="images/50k.png" alt="img1" id="img1" class="visible">
<img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
<img src="images/stats.png" alt="img3" id="img3" class="hidden">
</div>
</div>
<!-- end snippet -->
答案1 {#1}
得分: 1
以下是翻译好的部分：
Solution Link {#solution-link}
You can my solution working here on CodePen.
HTML {#html}
-
Each image uses the
onmouseoveryou had but I also added aonmouseoutto handle leaving. -
Each of the images calls the same JS functions but passes in its id as a parameter
why1
why2
why3
JS {#js}
-
The timer function keeps track of the active image but only shows it when the hovering effect is not active.
-
onHoveris called whenever themouseoverevent is called, which callsshowHoverImage, a function that hides the active image and shows the hovered image. -
onHoverLeavedoes the reverse when theonmouseoutevent occurs.var hoverActive = false;
var activeImageId = 1; var activeImage = document.getElementById("img" + activeImageId);
setInterval(function () { // Work out which image is next var nextImageId = (activeImageId % 3) + 1; var nextImage = document.getElementById("img" + nextImageId);
// Change shown image if (!hoverActive) { showImage(nextImage); hideImage(activeImage); } // Next image is now active activeImage = nextImage; activeImageId = nextImageId;}, 5000);
function onHover(imageName) { hoverActive = true; var hoverImage = document.getElementById(imageName); showHoverImage(hoverImage); }
function showHoverImage(hoverImage) { hideImage(activeImage); showImage(hoverImage); }
function onHoverLeave(imageName) { hoverActive = false; var hoverImage = document.getElementById(imageName); hideHoverImage(hoverImage); }
function hideHoverImage(hoverImage) { hideImage(hoverImage); showImage(activeImage); }
function showImage(docImage) { if (docImage) { docImage.classList.replace("hidden", "visible"); } }
function hideImage(docImage) { if (docImage) { docImage.classList.replace("visible", "hidden"); } }
英文:
Solution Link {#solution-link-1}
You can my solution working here on CodePen.
HTML {#html-1}
-
Each image uses the
onmouseoveryou had but I also added aonmouseoutto handle leaving. -
Each of the images calls the same JS functions but passes in its id as a parameter
<div class="why-choose-main-container"> <div class="why-choose-details"> <div class="card" onmouseover="onHover('img1')" onmouseout="onHoverLeave('img1')"> <h2>why1</h2> </div> <div class="card" onmouseover="onHover('img2')" onmouseout="onHoverLeave('img2')"> <h2>why2</h2> </div> <div class="card" onmouseover="onHover('img3')" onmouseout="onHoverLeave('img3')"> <h2>why3</h2> </div> </div> <div class="why-choose-image"> <img src="images/50k.png" alt="img1" id="img1" class="visible"> <img src="images/insta-pic.png" alt="img2" id="img2" class="hidden"> <img src="images/stats.png" alt="img3" id="img3" class="hidden"> </div> </div>
JS {#js-1}
-
The timer function keeps track of the active image but only shows it when the hovering effect is not active
-
onHoveris called whenever themouseoverevent is called which callsshowHoverImage, a function that hides the active image and shows the hovered image -
onHoverLeavedoes the reverse when theonmouseoutevent occursvar hoverActive = false;
var activeImageId = 1; var activeImage = document.getElementById("img" + activeImageId);
setInterval(function () { // Work out which image is next var nextImageId = (activeImageId % 3) + 1; var nextImage = document.getElementById("img" + nextImageId);
// Change shown image if (!hoverActive) { showImage(nextImage); hideImage(activeImage); } //Next image is now active activeImage = nextImage; activeImageId = nextImageId;}, 5000);
function onHover(imageName) { hoverActive = true; var hoverImage = document.getElementById(imageName); showHoverImage(hoverImage); }
function showHoverImage(hoverImage) { hideImage(activeImage); showImage(hoverImage); }
function onHoverLeave(imageName) { hoverActive = false; var hoverImage = document.getElementById(imageName); hideHoverImage(hoverImage); }
function hideHoverImage(hoverImage) { hideImage(hoverImage); showImage(activeImage); }
function showImage(docImage) { if (docImage) { docImage.classList.replace("hidden", "visible"); } } function hideImage(docImage) { if (docImage) { docImage.classList.replace("visible", "hidden"); } }
答案2 {#2}
得分: 0
我尝试更改了函数和JS代码。这是你的理想吗？
var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
changeImgByID();
}, 5000);
function changeImgByID() {
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}
// for first image
function changeImg(val) {
nextImageId=val;
changeImgByID();
}
.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}
<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card img-1" onmouseover="changeImg(1)">
<h2>why1</h2>
</div>
<div class="card img-2" onmouseover="changeImg(2)">
<h2>why2</h2>
</div>
<div class="card img-3" onmouseover="changeImg(3)">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="img1" id="img1" class="visible">
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="img2" id="img2" class="hidden">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="img3" id="img3" class="hidden">
</div>
</div>
英文:
I tried to change the function and JS code. Is that your ideal?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var activeImageId = 1;
var nextImageId = 1;
setInterval(function() {
nextImageId = nextImageId + 1;
changeImgByID();
}, 5000);
function changeImgByID() {
if (nextImageId < 3) {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = nextImageId;
} else {
document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
activeImageId = 3;
nextImageId = 0;
}
}
// for first image
function changeImg(val) {
nextImageId=val;
changeImgByID();
}
<!-- language: lang-css -->
.why-choose-main-container {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.why-choose-main-container .why-choose-details {
border: 2px solid green;
}
.why-choose-main-container .why-choose-details .card {
border: 2px solid red;
}
.why-choose-main-container .why-choose-image {
border: 2px solid blue;
display: flex;
position: relative;
width: 570px;
height: 670px;
}
.why-choose-main-container .why-choose-image img {
position: absolute;
width: 100%;
height: 100%;
}
.why-choose-main-container .why-choose-image img.visible {
display: block;
}
.why-choose-main-container .why-choose-image img.hidden {
display: none;
}
<!-- language: lang-html -->
<div class="why-choose-main-container">
<div class="why-choose-details">
<div class="card img-1" onmouseover="changeImg(1)">
<h2>why1</h2>
</div>
<div class="card img-2" onmouseover="changeImg(2)">
<h2>why2</h2>
</div>
<div class="card img-3" onmouseover="changeImg(3)">
<h2>why3</h2>
</div>
</div>
<div class="why-choose-image">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="img1" id="img1" class="visible">
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="img2" id="img2" class="hidden">
<img src="https://www.w3schools.com/html/img_chania.jpg" alt="img3" id="img3" class="hidden">
</div>
</div>
<!-- end snippet -->
