Как переключить 4 изображения с помощью кнопки

<html> 
<head> 
<title>How To Insert an Image</title> 
<script> 

function changeImage(){ 
var img = document.getElementById('image'); 
image.src='image4.jpg'; 
} 

</script> 

</head> 
<body> 
<img id="image" src="image1.jpg" /> 

<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

</body> 
</html>

Я довольно новичок в Javascript, поэтому, пожалуйста, не будьте слишком суровы. В основном, я пытаюсь переключиться с одного изображения на другое с помощью кнопки. До сих пор с этим кодом мне удалось сделать только 2 изображения, но когда я пытаюсь добавить третью или четвертую первую мессенджу изображения. Я надеялся, что кто-то поможет мне решить эту проблему.Как переключить 4 изображения с помощью кнопки

источник

2016-01-01 Owen

Ваш пример в порядке. Что происходит, когда вы хотите использовать другие изображения? Пожалуйста, объясните подробнее. – abeyaz

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

<div id="image1"> 
    <img ... > 
    <button ...> 
</div> 
<div id="image2" style="display: none"> 
    <img ... > 
    <button ...> 
</div>

То есть, поставить первое изображение, и кнопку, внутри «сОн <>» элемента, и второе изображение, а кнопка внутри второго элемента «< DIV>», который изначально скрыт.

Затем, яваскрипт каждой кнопки нужно просто установить CSS стиль свой собственный div «s на„дисплей: нет“, и удалить этот стиль от другого div элемента, эффективно скрывая одно изображение, и отображения другой.

Этот подход также позволяет обновить текст или ярлык кнопки соответственно. Если обе кнопки имеют одну и ту же метку, единственным видимым результатом является изменение изображения.

источник

2016-01-01 15:42:21

Не могли бы вы включить этот код в мой, чтобы я знал, что я делаю, потому что, как я сказал им, очень новый для javascript. Спасибо – Owen

Кажется, что вы на неправильном веб-сайте. Это не веб-сайт, на котором вы можете написать кому-то другому свой код. –

Попробуйте этот блок сценария вместо того, чтобы:

<script> 

var images = ['image2.jpg', 'image3.jpg', 'image4.jpg', 'image1.jpg'] 

function changeImage() { 
    var img = document.getElementById('image') 
    var url = images.shift() // remove first url from list 
    image.src = url // use it 
    images.push(url) // append url to the end of the list 
} 

</script>

источник

2016-01-01 15:44:46

Привет, спасибо за быстрый ответ.Можете ли вы включить этот блок сценария в свой код, а затем показать, чтобы я мог его протестировать. Я поместил его в свой код, но он, похоже, не работает, поэтому вы можете поместить его в свой код, чтобы я мог проверить его правильно, потому что, как я сказал им, новый для javascript. Спасибо – Owen

Вы были очень близки! Вы просто сделали ошибку, чтобы присвоить значение image.src вместо img.src. взглянуть на код ниже :)

кликать:

<html> 
 
<head> 
 
<title>How To Insert an Image</title> 
 
<script> 
 
    i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/ 
 
    
 
function changeImage(){ 
 
    var img = document.getElementById('image'); 
 
    i = i + 1; /*next image*/ 
 
     
 
     if(i == 5) /* if end is reached, reset to first image*/ 
 
     { 
 
      i = 1; 
 
     } 
 

 
     img.src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/ 
 
    } 
 

 
</script> 
 
</head> 
 
<body> 
 
<img id="image" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" /> 
 

 
<br><br><br> 
 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 
 

 
</body> 
 
</html>

Автоматический регулятор изображения

<html> 
 
<head> 
 
<title>How To Insert an Image</title> 
 
<script> 
 
    i = 1; /*Default value, only executed when the page is loaded (default is the first image, so when i + 1 the second image is displayed on first click.)*/ 
 
    
 
setInterval(function changeImage(){ 
 
    var img = document.getElementById('image'); 
 
    i = i + 1; /*next image*/ 
 
     
 
     if(i == 5) /* if end is reached, reset to first image*/ 
 
     { 
 
      i = 1; 
 
     } 
 

 
     img.src='image' + i + '.jpg'; /*number to text in variable, so image + 'number of the image (i)' + extension(.jpg in this case)*/ 
 
    }, 5000) 
 

 
</script> 
 
</head> 
 
<body> 
 
<img id="image" src="image1.jpg" height="100px" /> 
 

 

 

 
</body> 
 
</html>

источник

2016-01-01 15:51:07 Evochrome

Как бы я тогда использовал этот код, чтобы включить 4 изображения, поэтому он переключает 4 изображения вместо 2. Извините, но я все еще новичок, и все это кажется немного сложным. – Owen

взгляните на обновленный код, если у вас все еще есть вопросы, не стесняйтесь спрашивать :) – Evochrome

где обновленный код? – Owen

Что вы могли бы сделать, это объявить массив, который содержит все URL изображений:

var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"];

Затем при нажатии на кнопку, вы удалите первый адрес изображения из массива с помощью shift и назначить, что переменной imageUrl. Затем вы установите imageUrl в атрибут src элемента изображения на своей странице. Затем вы добавляете, что imageUrl в конце массива, используя push.

Это повернет изображения в массиве imageUrls при каждом нажатии.

<html> 
<head> 
    <title>How To Insert an Image</title> 
    <script> 

     var imageUrls = ["image2.jpg", "image3.jpg", "image4.jpg", "image1.jpg"]; 
     function changeImage(){ 
      var img = document.getElementById('image'); 
      var imageUrl = imageUrls.shift(); 
      img.src = imageUrl; 
      imageUrls.push(imageUrl); 
     } 

    </script> 

</head> 
<body> 
<img id="image" src="image1.jpg" /> 

<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

</body> 
</html>

источник

2016-01-01 16:33:29

Большое вам спасибо, что исправил проблему, которую я пытался решить в течение нескольких недель! Еще раз спасибо вам большое – Owen

Последний вопрос, как бы установить таймер, чтобы после 5 секунд он изменил изображение на следующий и так далее? – Owen

Вы можете использовать [setTimeout] (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) или [setInterval] (https://developer.mozilla.org/en-US/Docs/Web/API/WindowTimers/setInterval). –

Как переключить 4 изображения с помощью кнопки

ответ

Смежные вопросы