Обмен изображениями с помощью одной кнопки Функция JavaScript с использованием%

Question

Программисты-программисты! Замечательный день (или что бы то ни было)! С помощью других пользователей я смог управлять тем, как изображение меняется между вторым изображением каждые пару секунд. Это здорово! Поэтому я подсчитал некоторые математические данные с помощью оператора%, и, конечно же, когда изображение впервые отобразится, я получаю по умолчанию неработающее изображение ссылки браузера, но через 2 секунды все идет так, как планировалось. Так начинается этот исследовательский эксперимент. Я решил вместо автоматической замены, позволяет сделать своп с помощью кнопки, чтобы иметь возможность исследовать страницу столько, сколько захочу. Но кто хочет снова повторить то же самое, почему бы не узнать еще один классный трюк на этом пути. Этот трюк заключается в одновременном отображении обоих изображений, так что при нажатии кнопки они меняются местами. Та же математика, различный эффект для пользователя. Разве это не потрясающе!

Цель: показать два изображения и под ними одну кнопку. Когда нажимается кнопка, изображения должны меняться местами. Изображения слева были справа, справа - слева. Не используйте jQuery, это, в конце концов, эксперимент JavaScript (и мне еще предстоит многому научиться jQuery, но я не могу дождаться, чтобы туда добраться!)

Сообщения об ошибках в браузере: Интересно, что firefox ничего не дает мне. Я открываю браузер, загружаю страницу в него из VS 2012, очищаю ошибку conslole, обновляю страницу. И ничего. В chrome (мой браузер по умолчанию), однако, я получаю localhost pic src 404 не найден. Я нахожу это странным, потому что этот код находится на странице, которая имеет другой код, который ссылается на те же изображения и отлично работает. 2-секундная автоматическая флип-вещь, являющаяся частью этого другого кода.

отладка: я очень люблю нуб, чтобы узнать, что с ним происходит. Я получаю основную идею и изучаю ее. На сайте VS есть вся эта информация о настройке точек прерывания и запуске нескольких экземпляров VS, чтобы что-то сделать с другим движком. Я скоро буду на youtube, чтобы выбить это. Однако я приношу свои извинения, если есть какое-то простое исправление отладки, и я должен был это засвидетельствовать. . Забиванию через мой 2-го веб-класса и эта тема не была покрыта :(

Вот статьи, которые я нашел похож на мой вопрос Это было полезно, чтобы увидеть, как они настроить, если еще: https://stackoverflow.com/questions/15671442/swap-image-with-onclick-not-responding все все, что оказалось больше, чем я мог читать, ясно, что писатель более продвинут, чем я. a second: javascript swap text block onclick anchor link немного перегрузите информацию, я думаю. С этим многое происходило, но мне так и не удалось изменить любой из моего кода после его прочтения.

Если вам любопытно здесь статья VS, я кратко упомянул: http://blogs.msdn.com/b/visualstudioalm/archive/2013/06/28/javascript-native-interop-debugging-in-visual-studio-2013.aspx

И вот мой код:

<script type="text/javascript"> 
      function swap_pics() { 
       var c = 1 
       //I had: 
       //var andy_arr = ["andy_white.jpg","andy_black.jpg"]; 
       var andy_src1 = "andy_left.jpg"; 
       var andy_src2 = "andy_right.jpg"; 
       c = ((c + 1) % 2); 
       if (c == 0) { 

        //I was using an array which looked like: 
        // document.getElementById('andy_left').src = "andy_arr[0]"; 
        // document.get ... _right').src = andy_arr[Math.abs(c-1)]; 
        //0-1 abs = 1 
        //1-1 = 0, so It looks like it should now toggle. 

        document.getElementById('andy_left').src = andy_src1; 
        document.getElementById('andy_right').src = andy_src2; 
       } 
       else { 
        document.getElementById('andy_left').src = andy_src2; 
        document.getElementById('andy_right').src = andy_src1; 
       } 
      } 
     </script>  
     <div id="mini_lab_5"> 
     <img src="" 
      id="andy_left" 
      height="100" 
      width="100" 
      /> 
     <img src="" 
      id="andy_right" 
      height="100" 
      width="100" 
      /> 
     <br /> 
     <input type="button" value="Swap" 
      onclick="swap_pics(); 
    "/> 
    </div> 

Спасибо за то, что является частью сообщества и делает его отлично!

Answer 1

Вы можете добавить изображения непосредственно в ваши IMG тегов, как это:

<img src="andy_left.jpg" 
      id="andy_left" 
      height="100" 
      width="100" 
      /> 
     <img src="andy_right.jpg" 
      id="andy_right" 
      height="100" 
      width="100" 
      /> 

Тогда ваши изображения должны отображаться по умолчанию на вашей странице, если не ваши ссылки на изображения не являются хорошими.

Тогда вы могли бы заменить текущую функцию swap_pics следующим:

function swap_pics() { 
       var andy_left = document.getElementById('andy_left'), 
        andy_right = document.getElementById('andy_right'), 
        andy_left_src = andy_left.src, 
        andy_right_src = andy_right.src; 

       andy_left.src = andy_right_src; 
       andy_right.src = andy_left_src; 
      } 

Вот простой jsfiddle делает это: http://jsfiddle.net/X9YTP/

Answer 2

Держи удачу.

<html> 
<head> 
<script type="text/javascript"> 
function switchImage() { 
    var imgleft = document.getElementById('image1'), 
     imgright = document.getElementById('image2'), 
     img_left_src = imgleft.src, 
     img_right_src = imgright.src; 

    imgleft.src = img_right_src; 
    imgright.src = img_left_src; 

} 
</script> 
</head> 
<body> 
    <div> 
     <img id="image1" src="./home-cat.jpg" /> 
     <button id="butnum" onclick="switchImage();">Switch</button> 
     <img id="image2" src="./images.jpeg" /> 
    </div> 
</body> 
</html>