用于将最后一个图像移动到多个图像之间的第一个图像的 Javascript 代码
[英]Javascript code to shift the last image to the first between multiple images
问题描述
<html> <body> <div> <img src="cat.jpg" id="cat" onclick="alertfunction()"> <img src="dog.jpg" id="dog" onclick="alertfunction()"> <img src="frog.jpg" id="frog" onclick="movefunction()"> <img> </div> </body> <script> function alertfunction() { alert("Don't click me, click the frog"); } function movefunction(){ } </script> </html>
在这里，我需要什么帮助，每当用户单击最后一张图片时，移到第一个。 请帮我。
4 个解决方案
解决方案1
0 2020-10-03 13:22:00
每当用户单击图像时，您都可以更改图像的来源，例如：
let cat = document.getElementById("cat");
let frog = document.getElementById("frog");
function moveFunction() {
if(frog.src == "frog.jpg"){
frog.src = "cat.jpg";
}
else {
frog.src = "frog.jpg";
}
}
解决方案2
0 2020-10-03 13:31:59
您需要搜索的是 Javascript 中的 DOM 操作。 这是一个简单的方法来做你所要求的。 我尽量使它具有解释性。
<html>
<body>
<div id="animals">
<img src="cat.jpg" id="cat">
<img src="dog.jpg" id="dog">
<img src="frog.jpg" id="frog">
</div>
</body>
<script>
// animals variable here is a NodeList which is kind of like Array,
// but it is not enumerable (you cannot loop over it).
var animals = document.querySelectorAll('#animals > *');
// Here we convert it to an actual Array.
var animalsArray = Array.from(animals);
// We are going to add click listeners on every single of them.
animalsArray.forEach(function (animal) {
// Add an event listener to this img element.
animal.addEventListener(
// The listener should observe click events.
'click',
// The listener will call this function
// when a click event is triggered.
function (event) {
// This is the order number of the clicked animal image.
// Assuming that you have 3 images on the page, this number
// will be 0, 1 or 2.
// 0 marking the image as the first of rest, and 2 marking it
// as the last of them.
var positionOfThisAnimal = animalsArray.indexOf(this);
// animalsArray.length will give you the number of images in
// the `animalsArray` Array.
// If the position of the clicked animal image is smaller than
// the highest it can be (which is `2` for 3 images), it is not
// the last one, and we will alert the user with a message.
if (positionOfThisAnimal < animalsArray.length - 1) {
alert("Don't click me! Click the frog.");
// Because all we have to do for these not-the-last-one
// images is to alert the user, we are returning a void
// (empty) result here which effectively stops the function
// from executing the rest of the lines we have below.
return;
}
// Here we are taking the clicked animal image (which is the
// last one in the list) and we are moving it to the first
// place in the div with ID "animals".
document.querySelector('#animals').prepend(this);
},
// This `false` means the listener should not be marked as passive.
//
// Passive listeners are asynchronous, meaning that the browser
// will *not* wait for your function to complete executing before
// continuing to wait for other user inputs like mouse moves or
// keyboard strokes.
//
// The browser will wait for active listeners. This has a downside
// though. If your function takes too long to complete, the user
// will notice that their browser (or just the current tab) freezes
// and won't let user interact with the page until the execution
// is completed.
false,
);
});
</script>
</html>
解决方案3
0 2020-10-03 16:01:25
const img1 = document.querySelector('#cat'); const img2 = document.querySelector('#dog'); const img3 = document.querySelector('#frog'); const imgUrl = img3.src; img1.addEventListener('click', () => { if(img1.src === imgUrl) { let temp = img1.src; img1.src = img2.src; img2.src = img3.src; img3.src = temp; let temp2 = img1.id; img1.id = img2.id; img2.id = img3.id; img3.id = temp2; } else { alert('Don\\'t click me, click the frog'); }; }); img2.addEventListener('click', () => { alert('Don\\'t click me, click the frog'); }); img3.addEventListener('click', () => { if(img3.src === imgUrl) { let temp = img1.src; img1.src = img3.src; img3.src = img2.src; img2.src = temp; let temp2 = img1.id; img1.id = img3.id; img3.id = img2.id; img2.id = temp2; } else { alert('Don\\'t click me, click the frog'); }; });
img { width: 300px; height: 300px; }
<div> <img src="cat.jpg" id="cat"> <img src="dog.jpg" id="dog"> <img src="frog.jpg" id="frog"> </div>
解决方案4
-1 已采纳 2020-10-03 13:27:19
我们可以在 CSS 中使用 flex 和 order 来做到这一点，检查下面的代码，而不是图像，我使用带有颜色的 div。
.maindiv { display: flex; } #frog { padding: 10px; width: 20px; background: red; } #cat { padding: 10px; width: 20px; background: blue; } #dog { padding: 20px; width: 10px; background: green; }
<html> <body> <div class="maindiv"> <div id="cat" onclick="alertfunction()">cat</div> <div id="dog" onclick="alertfunction()">dog</div> <div id="frog" onclick="movefunction()">frog</div> </div> </body> <script> function alertfunction() { alert("Don't click me, click the frog"); } function movefunction(){ if (document.getElementById('frog').style.order == '1') { document.getElementById('frog').style.order = '3'; document.getElementById('cat').style.order = '1'; document.getElementById('dog').style.order = '2'; } else { document.getElementById('frog').style.order = '1'; document.getElementById('cat').style.order = '2'; document.getElementById('dog').style.order = '3'; } } </script> </html>
多张图片显示最后一张带有动态创建的画布的图片并分配给图片
[英]Multiple Images displaying last image with dynamically created canvas and assigning to images
无法将最后两张图像居中，并且第一张图像被夸大了
[英]Having trouble centering the last two images, and the first image is overblown
Javascript 图片幻灯片迭代 - 为什么最后一张图片最先出现
[英]Javascript image slideshow iteration - why is the last image first
Javascript image.onload在多个图像上仅适用于最后一个图像
[英]Javascript image.onload on multiple image only working for the last image
Javascript：在两个日期之间查找每个月的第一个和最后一个日期？
[英]Javascript : find first and last date of every month between two dates?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.