猿问

在多个图像之间将最后一张图像移动到第一张的Javascript代码

<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>


在这里，我需要帮助，每当用户单击最后一张图片时，移至第一张。请帮我。


开满天机
浏览 148回答 4
4回答

紫衣仙女

您需要搜索的是 Javascript 中的 DOM 操作。这是一个简单的方法来做你所要求的。我试图尽可能地解释它。<html><body>&nbsp; &nbsp; <div id="animals">&nbsp; &nbsp; &nbsp; &nbsp; <img src="cat.jpg" id="cat">&nbsp; &nbsp; &nbsp; &nbsp; <img src="dog.jpg" id="dog">&nbsp; &nbsp; &nbsp; &nbsp; <img src="frog.jpg" id="frog">&nbsp; &nbsp; </div></body><script>&nbsp; &nbsp; // animals variable here is a NodeList which is kind of like Array,&nbsp; &nbsp; // but it is not enumerable (you cannot loop over it).&nbsp; &nbsp; var animals = document.querySelectorAll('#animals > *');&nbsp; &nbsp; // Here we convert it to an actual Array.&nbsp; &nbsp; var animalsArray = Array.from(animals);&nbsp; &nbsp; // We are going to add click listeners on every single of them.&nbsp; &nbsp; animalsArray.forEach(function (animal) {&nbsp; &nbsp; &nbsp; &nbsp; // Add an event listener to this img element.&nbsp; &nbsp; &nbsp; &nbsp; animal.addEventListener(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // The listener should observe click events.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'click',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // The listener will call this function&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // when a click event is triggered.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // This is the order number of the clicked animal image.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Assuming that you have 3 images on the page, this number&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // will be 0, 1 or 2.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 0 marking the image as the first of rest, and 2 marking it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // as the last of them.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var positionOfThisAnimal = animalsArray.indexOf(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // animalsArray.length will give you the number of images in&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the `animalsArray` Array.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // If the position of the clicked animal image is smaller than&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the highest it can be (which is `2` for 3 images), it is not&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the last one, and we will alert the user with a message.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (positionOfThisAnimal < animalsArray.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Don't click me! Click the frog.");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Because all we have to do for these not-the-last-one&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // images is to alert the user, we are returning a void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // (empty) result here which effectively stops the function&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // from executing the rest of the lines we have below.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Here we are taking the clicked animal image (which is the&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // last one in the list) and we are moving it to the first&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // place in the div with ID "animals".&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('#animals').prepend(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // This `false` means the listener should not be marked as passive.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Passive listeners are asynchronous, meaning that the browser&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // will *not* wait for your function to complete executing before&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // continuing to wait for other user inputs like mouse moves or&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // keyboard strokes.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // The browser will wait for active listeners. This has a downside&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // though. If your function takes too long to complete, the user&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // will notice that their browser (or just the current tab) freezes&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // and won't let user interact with the page until the execution&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // is completed.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; false,&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; });</script></html>
0

茅侃侃

您可以在用户单击图像时更改图像的来源，例如：let cat = document.getElementById("cat");let frog = document.getElementById("frog");function moveFunction() {&nbsp; if(frog.src == "frog.jpg"){&nbsp; &nbsp; frog.src = "cat.jpg";&nbsp; }&nbsp; else {&nbsp; &nbsp; frog.src = "frog.jpg";&nbsp; }}
0

慕神8447489

const img1 = document.querySelector('#cat');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const img2 = document.querySelector('#dog');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const img3 = document.querySelector('#frog');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const imgUrl = img3.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img1.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(img1.src === imgUrl) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let temp = img1.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img1.src = img2.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img2.src = img3.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img3.src = temp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let temp2 = img1.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img1.id = img2.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img2.id = img3.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img3.id = temp2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Don\'t click me, click the frog');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img2.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Don\'t click me, click the frog');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img3.addEventListener('click', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(img3.src === imgUrl) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let temp = img1.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img1.src = img3.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img3.src = img2.src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img2.src = temp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let temp2 = img1.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img1.id = img3.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img3.id = img2.id;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img2.id = temp2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Don\'t click me, click the frog');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="cat.jpg" id="cat">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="dog.jpg" id="dog">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="frog.jpg" id="frog">&nbsp; &nbsp; &nbsp; &nbsp; </div>
0

呼唤远方

我们可以在 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>&nbsp; &nbsp; <div class="maindiv">&nbsp; &nbsp; &nbsp; &nbsp; <div id="cat" onclick="alertfunction()">cat</div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="dog" onclick="alertfunction()">dog</div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="frog" onclick="movefunction()">frog</div>&nbsp; &nbsp; </div></body><script>&nbsp; &nbsp; function alertfunction() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Don't click me, click the frog");}&nbsp; &nbsp; function movefunction(){&nbsp; &nbsp; if (document.getElementById('frog').style.order == '1') {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('frog').style.order = '3';&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('cat').style.order = '1';&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('dog').style.order = '2';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('frog').style.order = '1';&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('cat').style.order = '2';&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('dog').style.order = '3';&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }</script></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答