Как связать различные изображения слайд-шоу с URL в Javascript

Question

Как связать различные изображения слайд-шоу с URL в Javascript

0

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

Вот что я имею:

<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
<div align="left"><img src="Images/slideshow_1_home_2013.jpg" 
 name="slide" width="974"  height="305" align="left"/></div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<4)
step++
else
step=1
setTimeout("slideit()",10000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
}
</script>
</body>
</html>

user3097517 13 дек. 2013, в 01:02

Источник

0

Было бы полезно, если бы ваш Javascript был хорошо отформатирован и находился в рабочем состоянии. Как написано, в вашем коде даже нет точек с запятой.
Eric 13 дек. 2013, в 00:21
0

Я согласен. Будучи экспертом, как бы вы это сделали?
user3097517 13 дек. 2013, в 16:00

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Было бы полезно, если бы ваш Javascript был хорошо отформатирован и находился в рабочем состоянии. Как написано, в вашем коде даже нет точек с запятой.
Я согласен. Будучи экспертом, как бы вы это сделали?

Julien Altieri · Answer 1 · 2013-12-12T22-54-00.000Z

Один из способов - использовать ссылку для обертывания ваших изображений:

    <head>
    <script type="text/javascript">
        <!--
//preload images
var image1=new Image()
image1.src="Images/slideshow_1_home_2013.jpg"
var image2=new Image()
image2.src="Images/slideshow_2_home_2013.jpg"
var image3=new Image()
image3.src="Images/slideshow_3_home_2013.jpg"
var image4=new Image()
image4.src="Images/slideshow_4_home_2013.jpg"
//-->
</script>
</head>
<body>
    <div align="left"><a name="mylink" href=""><img src="Images/slideshow_1_home_2013.jpg" 
        name="slide" width="974"  height="305" align="left"/></a></div>
        <script type="text/javascript">
            <!--
            var step=1
            var whichimage=1
            function slideit(){
                if (!document.images)
                    return
                document.images.slide.src=eval("image"+step+".src")

                whichimage=step
                if (step<4)
                    step++
                else
                    step=1
                setTimeout("slideit()",10000)
            }
            slideit();

            if (whichimage==1)
                document.links.mylink.src="link1.htm"
            else if (whichimage==2)
                document.links.mylink.src="link2.htm"

        </script>
    </body>
    </html>

Привет, спасибо за ваш ответ ... есть ли способ связать каждое из изображений с отдельной URL-ссылкой каждый раз, когда она просматривает каждое другое изображение?
абсолютно. Вы можете создать простой массив со ссылками и каждый раз, когда он скользит, выбрать следующий элемент в массиве

Rodrigo Calix · Answer 2 · 2013-12-13T00-03-00.000Z

Есть более простые способы сделать это:
сначала: создайте HTML-документ, и мы будем называть его images.html
в этом файле просто добавьте все изображения, которые вы хотите загрузить, например:

<img src="img1.jpg" onload="parent.loadedimg()" />
<img src="img2.jpg" onload="parent.loadedimg()" />
<img src="img3.jpg" onload="parent.loadedimg()" />

мы используем parent для вызова функции из нашего iframe в наш файл index.html
то просто добавьте на страницу index.html это место, где вы хотите, чтобы оно не повлияло на вашу страницу.

<div style="display:none>
<iframe src="images.html">
</iframe>
</div>

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

<img src="img1.jpg" width="400" height="300" id="slider" />

наконец, Javascript:

<script type="text/javascript">
startslide();
var imgnum=parseInt;
imgnum=0;
maximg=parseInt;
maximg=0;

function loadedimg(){
maximg++;
}

function startslide(){
if(imgnum&lt;=maximg && maximg>0){
imgnum++;
document.getElementById('slider').src='img'+imgnum+'.jpg';
if(imgnum==maximg){
imgnum=0;
}
}
window.setTimeout(function(){startslide()},2000);
}
</script>

теперь объяснение:
если вы помните в iframe каждый раз, когда загрузка изображения отправляет функцию в javascript в этом javascript, когда функция называется изменением var maximg на 1, поэтому каждый раз, когда изображение загружает этот var sum 1 в этом примере, когда все изображения чтобы загрузить окончательный номер для maximg, будет 3 причины, в iframe вы загрузили только 3 изображения, и теперь вам не нужно беспокоиться о количестве изображений, которые вы хотите загрузить, просто добавьте столько изображений, сколько вы хотите в iframe.

var imgnum используется для изменения src отображаемого изображения, поэтому убедитесь, что все ваши изображения имеют одинаковое имя, а затем номер отображаемого порядка.

и строка, которая использовала window.setTimeout, определит, сколько времени будет ждать, чтобы перейти к следующему изображению, в этом случае я использую 2000, а это означает 2 секунды, 500 означает 0,5 секунды, 5000 означает 5 секунд, поэтому измените его на любое число, которое вы хочу подождать.
что все это так, я надеюсь, был полезен для вас !.

Здравствуй! Спасибо, что нашли время, чтобы помочь новичку, который полностью потерян. Где бы я добавил / div? В файл CSS или в теле?
ну, есть много способов добавить CSS в div, который вы можете использовать в div this, <div style = "border-radius: 5px; ширина: 400px; высота: 300px; box-shadow: 0px 0px 10px # 000000"> Ваш контент здесь </ div>, или добавление между заголовками этого <style type = "text / css"> .mystyle {color: # 888888; font-size: 36px;} </ style> и HTML будет <div class = "mystyle"> my content </ div> именем класса в HTML, если определено, как вы называете его между тегом style и Другой способ - создать внешний файл .css со всеми правилами css и добавить в свой HTML index.html <lin rel = "stylesheet" href = "nameile.css" />, и это все