スライダーイメージにリンクを追加するには

私はイメージスライダーに次のコードを使用しました。そしてどのように私は、各画像スライダーイメージにリンクを追加するには

<!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のように行うことができ、各画像

出典

2016-04-19 Manigandan

あなたは、あなたの質問にjQueryをタグ付けされたが、あなたはどれを使用していません。 –

あなたは何をしたいのか説明できますか？ – Alexis

画像ごとにリンクを追加したい – Manigandan

へのリンクを追加する方法を教えてください。

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

出典

2016-04-19 08:58:41 Alexis

上記のコードが動作しています、ありがとうございます – Manigandan

ネストされたif-elseステートメントの代わりにif-else-ifを使用することもできます。これは機能します。

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

出典

2016-04-19 09:05:27

スライダーイメージにリンクを追加するには

答えて

関連する問題