如何在Javascript中用URL链接不同的幻灯片图像

How to link different slideshow images with a URL in Javascript

本文关键字：幻灯片 图像 链接 URL Javascript 中用      更新时间：2023-09-26

我对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>

一种方法是使用链接来包装图像：

    <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>

有一种更简单的方法：
首先：创建一个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中添加你想要的图像

var imgnum用于更改要显示的图像的src，因此请确保所有图像都具有相同的名称，然后是要显示的顺序编号

使用window.setTimeout的行将定义更改为下一个图像所需的等待时间。在这种情况下，我使用2000，它意味着2秒，500意味着0.5秒，5000意味着5秒，所以将其更改为您想要等待的任何数字
我希望这一切对你有所帮助！。

相关文章：