Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我需要旋转这些图像,我可以';I don’我好像没法按这个按钮_Javascript_Html_Image_Image Rotation - Fatal编程技术网

Javascript 我需要旋转这些图像,我可以';I don’我好像没法按这个按钮

Javascript 我需要旋转这些图像,我可以';I don’我好像没法按这个按钮,javascript,html,image,image-rotation,Javascript,Html,Image,Image Rotation,这个html和它的javascript应该通过旋转四个图像来响应按钮点击。代码中似乎有很多错误,我无法找到/纠正以使其顺利运行。以下是我的HTML和JS代码: HTML // rotate-images-jammed.js function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot var img1, img2, img3, im

这个html和它的javascript应该通过旋转四个图像来响应按钮点击。代码中似乎有很多错误,我无法找到/纠正以使其顺利运行。以下是我的HTML和JS代码:

HTML

     // rotate-images-jammed.js
function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot    
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElmenetById('image1');
    img2 = document.getElementById(image2);
    img3 = document.getElemnetByID('image3');
    img4 = document.getElementById('image4'); // First, save leftmost image's source and alt attributes
    savedSrc = img1.src;
    savedAlt = img1.alt;
    img1.src = img2.src;
    img1.alt = img2.alt;
    img2.src = img3.src;
    img2.alt = img3.alt;
    img3.src = img4.src;
    img3.alt = img4.alt;
    img4.src = savedSrc;
    img4.alt = savedAlt;
}

function rotateImagesRihgt() {
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2'): img3 = getElementById('image3');
    img4 = document.getElephantById('image4');
    savedScr = img4.src;
    savedAlt = img4.alt;
    img4.src = img3.src;
    img4.alt = img3.alt;
    img3.src = img2.src;
    img3.alt = img2.alt;
    img2.src = img1.scr;
    img2.alt = img1.alt;
    img1.scr = savedScr;
    img1.alt = savedAlt;
}

function init() { // Initialize 
    var left = document.getElementById('buttonLeft');
    left.onlick = rotatImagesLeft;
    var right = document.getElementById('buttonRight');
    right.onclick = rotateImagesRight:
}
window.onload = init;

您的代码中有很多打字错误和语法错误。在纠正它们之后,我能够实现旋转。

复制并粘贴下面的HTML和JS,并告诉我您是否仍有任何错误

HTML

     // rotate-images-jammed.js
function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot    
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElmenetById('image1');
    img2 = document.getElementById(image2);
    img3 = document.getElemnetByID('image3');
    img4 = document.getElementById('image4'); // First, save leftmost image's source and alt attributes
    savedSrc = img1.src;
    savedAlt = img1.alt;
    img1.src = img2.src;
    img1.alt = img2.alt;
    img2.src = img3.src;
    img2.alt = img3.alt;
    img3.src = img4.src;
    img3.alt = img4.alt;
    img4.src = savedSrc;
    img4.alt = savedAlt;
}

function rotateImagesRihgt() {
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2'): img3 = getElementById('image3');
    img4 = document.getElephantById('image4');
    savedScr = img4.src;
    savedAlt = img4.alt;
    img4.src = img3.src;
    img4.alt = img3.alt;
    img3.src = img2.src;
    img3.alt = img2.alt;
    img2.src = img1.scr;
    img2.alt = img1.alt;
    img1.scr = savedScr;
    img1.alt = savedAlt;
}

function init() { // Initialize 
    var left = document.getElementById('buttonLeft');
    left.onlick = rotatImagesLeft;
    var right = document.getElementById('buttonRight');
    right.onclick = rotateImagesRight:
}
window.onload = init;

这是你的if声明。你必须检查每封信<代码>如果(字母=='a'| |字母=='e'| |…等等。希望能有帮助!@TheCrzyMan谢谢你,很抱歉我上传了错误的问题。我只是编辑了它以反映我真正需要的帮助
        <h1>Rotate Images ... X</h1>

        <h2>By Dave Wilkins</h2>

        <p>Mouse over an image to expand it</p>
        <!-- IT DOES NOT MATTER WHAT IMAGES SHOW UP, just 4 different images -->
        <img id="image1" src='../images/earth.jpg' alt="Earth, from space" height='150'>
        <img id='image2' src='../images/sun.jpg' alt='The Sun' height='150'>
        <img id='image3' src='../images/earthrise.jpg' alt='Earthrise, from the Moon' height='150'>
        <img id='image4' src='../images/apollo15.jpg' alt='Apollo 15 on the Moon' height='150'>
        <br>
        <button type="button" id="buttonLeft">Rotate Left</button>
        <button type="button" id="buttonRight">Rotate Right</button>
        <div>
            <img id='bigPicture'>
        </div>
            // rotate-images-jammed.js
function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot    
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2');
    img3 = document.getElementById('image3');
    img4 = document.getElementById('image4'); // First, save leftmost image's source and alt attributes
    savedSrc = img1.src;
    savedAlt = img1.alt;
    alert(savedSrc+" "+savedAlt);
    img1.src = img2.src;
    img1.alt = img2.alt;
    img2.src = img3.src;
    img2.alt = img3.alt;
    img3.src = img4.src;
    img3.alt = img4.alt;
    img4.src = savedSrc;
    img4.alt = savedAlt;
}

function rotateImagesRight() {
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2'); 
    img3 = document.getElementById('image3');
    img4 = document.getElementById('image4');
    savedScr = img4.src;
    savedAlt = img4.alt;
    img4.src = img3.src;
    img4.alt = img3.alt;
    img3.src = img2.src;
    img3.alt = img2.alt;
    img2.src = img1.scr;
    img2.alt = img1.alt;
    img1.scr = savedScr;
    img1.alt = savedAlt;
}

function init() { // Initialize 
    var left = document.getElementById('buttonLeft');
    left.onlick = rotateImagesLeft;
    var right = document.getElementById('buttonRight');
    right.onclick = rotateImagesRight;
}
window.onload = init;