頁面重繪 時影像會發生變化,我正在完成此操作,但我無法添加單個影像鏈接。我該怎么做?請讓我出去..這是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#banner-images img{
width: 172px;
height: 215px ;
border: 10px solid #fff ;
}
</style>
</head>
<body>
<div id="banner-images"> </div>
<script>
var images = ['1.jpg ', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
$('<img src="images/' images[Math.floor(Math.random() * images.length)] '">').appendTo('#banner-images');
</script>
</body>
</html>
uj5u.com熱心網友回復:
我希望我正確理解了你的問題。這是一個解決方案。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#banner-images img{
width: 172px;
height: 215px ;
border: 10px solid #fff ;
}
</style>
</head>
<body>
<div id="banner-images"> </div>
<script>
var images = [
{src: '1.jpg', href: '#link1'},
{src: '2.jpg', href: '#link2'},
{src: '3.jpg', href: '#link3'},
{src: '4.jpg', href: '#link4'}
];
var random_image = images[Math.floor(Math.random() * images.length)];
$('<a href="' random_image.href '"><img src="images/' random_image.src '"></a>').appendTo('#banner-images');
</script>
</body>
</html>
如果你想讓它更清晰,你可以使用JavaScript Template Literals來做到這一點。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#banner-images img{
width: 172px;
height: 215px ;
border: 10px solid #fff ;
}
</style>
</head>
<body>
<div id="banner-images"></div>
<script>
var images = [
{src: '1.jpg', href: '#link1'},
{src: '2.jpg', href: '#link2'},
{src: '3.jpg', href: '#link3'},
{src: '4.jpg', href: '#link4'}
];
var random_image = images[Math.floor(Math.random() * images.length)];
$('#banner-images').html(`
<a href="${random_image.href}">
<img src="images/${random_image.src}">
</a>
`);
</script>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/497128.html
標籤:javascript 图片 刷新
