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

时间：2013-12-13 00:01:04

标签： javascript jquery html css

我是JavaScript的新手，我正在创建一个简单的幻灯片，我的工作正常。唯一的问题是我似乎无法在幻灯片中创建每个图像的Web链接。我想将它链接到不同的网页，链接到幻灯片显示的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>

2 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

有一种更简单的方法可以做到这一点：
第一步：创建一个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总和1在这个例子中当所有图像完成加载最终的数字为maximg将是3因为在iframe你只加载了3张图片，现在你不需要担心你要加载的图像的数量，你只需要添加这么多的图像希望在iframe中。

var imgnum用于更改要显示的图像的src，因此请确保您的图像具有相同的名称，然后显示要显示的订单编号。

并且使用window.setTimeout的行将定义在这种情况下等待更改为下一个图像的时间我使用2000并且它表示2秒，500表示0.5秒，5000表示5秒，因此将其更改为任何数字我想等 这一切都是如此，我希望对你有所帮助！

相关问题
最新问题