2015-04-24 6 views
1

Я не в javascript, но я действительно хочу рандомизированные изображения на моей странице индекса, поэтому было интересно, есть ли что-нибудь, что я мог бы сделать с моим текущим javascript, чтобы добавить ссылку на изображение для каждой картинки?Ссылка на изображение с javascript

< img id = "reklame"/> 
 
    <script> 
 
    function getRandomImage() { 
 
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg']; 
 
    var image = images[Math.floor(Math.random() * images.length)]; 
 

 
    return image; 
 
    } 
 

 
function displayRandomImage() { 
 
    var htmlImage = document.getElementById("reklame"); 
 
    htmlImage.src = getRandomImage(); 
 
} 
 
displayRandomImage(); < /script>

+0

http://jsfiddle.net/8Lh0hg4o/? Его генерация случайных изображений. –

+0

Теперь он делает это только один раз - вам нужно добавить событие, например, щелчок или временной интервал, что вызовет функцию displayRandomImage(). –

+0

Что вы подразумеваете под «' imagelink'? Вы просто имеете в виду источник файла изображения или должны ли перенаправить изображение на другую страницу при нажатии? – Markai

ответ

0

Позвоните своему displayRandomImage() внутри setInterval()

window.setInterval(function(){ 
     displayRandomImage(); 
}, 5000); 

попробовать эту скрипку - http://jsfiddle.net/yellen/twf16y5a/4/

Fiddle обновляется, чтобы связать URL с каждым изображением

function getRandomImage() { 
 
    var images = [{ 
 
     "image": "http://freethumbs.dreamstime.com/8/big/free_89634.jpg", 
 
     "url": "http://www.google.com" 
 
    }, { 
 
     "image": "http://freethumbs.dreamstime.com/14/big/free_144227.jpg", 
 
     "url": "http://www.facebook.com" 
 
    }, { 
 
     "image": "http://freethumbs.dreamstime.com/22/big/free_229201.jpg", 
 
     "url": "http://www.stackoverflow.com" 
 
    }] 
 
    // You'd like store the image path and the url as a single object and have an array of that 
 
    //images = [{img, url},{img, url}] 
 
    var image = images[Math.floor(Math.random() * images.length)]; 
 
    return image; 
 
} 
 

 
function displayRandomImage() { 
 
    var htmlImage = document.getElementById("reklame"); 
 
    var link = document.getElementById("myuA"); 
 
    var imageObj = getRandomImage(); 
 
    htmlImage.src = imageObj.image; 
 
    link.href = imageObj.url; 
 
} 
 
displayRandomImage(); 
 
window.setInterval(function() { 
 
    displayRandomImage(); 
 
}, 5000);
<a id="myuA" href="" target="_blank"> 
 
    <img id="reklame" /> 
 
</a>

+0

Дайте интервал по вашему выбору – Yellen

+0

Спасибо, это сработало, но я Я могу нажать на изображение и позволить ему перенаправить меня на продукты, которые называются «product.php» ?? – TheAsianTutorials

+0

Вы можете сделать это, выполнив функцию getRandomImage(), чтобы вернуть объект {image: 'путь к изображению', ссылка: 'link to click'} – Yellen

1

Вы можете сделать это с помощью функции setInterval

//First call 
displayRandomImage(); 
var loop = setInterval(function() { 
    //Call each 5 seconds 
    displayRandomImage() 
}, 5000); 

jsFiddle

0

Может быть что-то вроде этого?

<a id="reklame-link" href="#";> 
<img id = "reklame" /> 

function displayRandomImage() { 
var htmlImage = document.getElementById("reklame"); 
var htmlLink = document.getElementById("reklame-link"); 
var randomImage = getRandomImage(); 
htmlImage.src = randomImage; 
htmlLink.href = randomImage; 
console.log(getRandomImage()); 
} 

http://jsfiddle.net/y7rwhmd7/

1

надеюсь, что это будет работать:

<html> 
<head></head> 
<body> 
<div id = "reklame"> 
<img/> 
</div> 
    <script type="text/javascript"> 
    function getRandomImage() { 
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg']; 
    var image = images[Math.floor(Math.random() * images.length)]; 

    return image; 
    } 

function displayRandomImage() { 
    var imgDiv = document.getElementById("reklame"); 
    var image = imgDiv.getElementsByTagName('img')[0]; 
    image.src = getRandomImage(); 
    var a=document.createElement('a'); 
    a.href=getRandomImage(); 
    a.appendChild(image); 
    imgDiv.appendChild(a); 
} 

window.setInterval(function(){ 
     displayRandomImage(); 
}, 5000); 
</script> 
</body> 
</html> 
Смежные вопросы