Как я могу открыть разные окна с разными изображениями? - PullRequest
Новая
       6

Как я могу открыть разные окна с разными изображениями?

0 голосов
/ 24 сентября 2018

У меня есть некоторые ограничения в программе, было бы неплохо, если бы решение

не нуждалось в JQuery, как я уже упоминал выше, оно имеет некоторые ограничения

.

Я пытаюсь достичь.

  1. Динамически изменять изображение с помощью JavaScript.(Готово)

  2. Каждое изображение приведет к отдельной ссылке, когда пользователь нажмет на нее.(Нужна помощь!)

Ниже приведен мой текущий код.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var image1=new Image()
image1.src="image_1.jpg" 

var image2=new Image()
image2.src="image_2.jpg"

var image3=new Image()
image3.src="image_3.jpg"

var step = 1 

function slideit(){

document.images.slide.src=eval("image"+step+".src")

if(step<3) step++

else step=1

setTimeout("slideit()",2500)

}

slideit()

function inputhref() {

var href = 'https://www.google.ca/';

window.open(href)

}
</script>
</head>
<body>
<img src="image_1.jpg" name="slide" width="400" height="400" 
 onclick="inputhref()">

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Вы можете создать объект, который хранит как источник изображения, так и связанную ссылку.Кроме того, вы что-то делаете с этими Image() классами, кроме установки и получения исходных URL-адресов?Потому что вы можете просто хранить их как простые строки в объекте.Я также рекомендовал бы хранить шаг как свойство и хранить все их в массиве, чтобы упростить поиск нужного.

Что-то вроде: 

var images = [
    {
        step: 1,
        src: "image_1.jpg",
        link: "http://example.com/image1-link",
    },
    {
        step: 2,
        src: "image_2.jpg",
        link: "http://example.com/image2-link",
    },
    // Repeat as necessary
]

И тогда вы можетеизмените свои функции соответственно: 

function slideit() {
    var correctImage = images.find(image => image.step == step);
    document.images.slide.src = correctImage.src;
    // rest is unchanged
}

function inputhref(step) {
    var correctImage = images.find(image => image.step == step);
    window.open(correctImage.link);
}
0 голосов
/ 24 сентября 2018

Было несколько ошибок, которые я решил, и теперь это работает!

  1. window.location.href для открытия URL в том же окне.

  2. document.querySelector() для выбора элемента (ов).

  3. Вызов setTimeout() с именем функции безиспользуя ''. 

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <img src="image_1.jpg" id="slide" width="100" height="100" 
     onclick="inputhref()">
     
     
    <script type="text/javascript">

    var image1=new Image()
    image1.src="https://image_1.jpg" 

    var image2=new Image()
    image2.src="https://image_2.jpg"

    var image3=new Image()
    image3.src="https://image_3.jpg"
    
    var step = 1 
    var slide = document.querySelector('#slide');
    var timer
	
	function slideit(){
	
	slide.src="https://image_"+step+".jpg"
	
	if(step<3) step++
	
	else step=1
  console.log('Image changed to ' + slide.src);
	timer = setTimeout(slideit,2500)

	}

slideit();

    function inputhref() {

	window.location.href = slide.src;
  clearInterval(timer);
	
	}
    </script>
</body>
</html>
...