如何在滑块图像上添加链接

How to add link on slider images

本文关键字：添加 链接 图像      更新时间：2023-09-26

我为图像滑块使用了以下代码。以及我如何设置每个图像的链接

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="1.png";
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="2.png";
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="3.png";
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/></div>
</body>    
</html>

请告诉如何添加链接到每个图像

您可以喜欢您的图像src。

使用.setAttribute('href', "yoururl");设置带有JS的html属性。

在图像周围添加链接并更改href属性。

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
   var link = document.getElementById("mylink");
    //change the image
    if(!imageID){
        document.getElementById("myimage").src="1.png";
        link.setAttribute('href', "url1");
        imageID++;
    }
    else{if(imageID==1){
        document.getElementById("myimage").src="2.png";
        link.setAttribute('href', "url2");
        imageID++;
    }else{if(imageID==2){
        document.getElementById("myimage").src="3.png";
        link.setAttribute('href', "url3");
        imageID=0;
    }}}
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
</head>
<body style='background:black;' onload='changeimage(2)'>
  <div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
   <a id="mylink" href="#">
    <img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
   </a>
  </div>
</body>    
</html>

您还可以使用if-else-if而不是嵌套的if-else语句。这是有效的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
    //change the image
    if(!imageID){
     document.getElementById("myimage").src="https://pixabay.com/static/uploads/photo/2015/08/14/08/29/images-888133_960_720.jpg";
document.getElementById("link").href = "url1"; 
        imageID++;
    }
    else if(imageID==1){
        
        document.getElementById("myimage").src="http://eyespired.nl/wp-content/uploads/2013/09/bronzen-beelden-matteo-pugliese-607x458.jpg";
        document.getElementById("link").href = "url2";
        imageID++;
    }else if(imageID==2){
        document.getElementById("myimage").src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg";
        document.getElementById("link").href = "url3";
        imageID=0;
    }
    //call same function again for x of seconds
    setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
</script>
<body style='background:black;' onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'>
  <a id="link" href="#">
    <img width='700px' height='100px' id='myimage' src='http://www.photos.a-vsp.com/fotodb/14_green_cones.jpg'/>
  </a></div>
</body>

相关文章：