|
 |
|
เกียวกับการ Random background image จาก Folder ที่กำหนดไว้ ต้องเขียนโค้ดอย่างไรครับ |
|
 |
|
|
 |
 |
|
ขอเปิดด้วย Script ที่ได้เขียนไว้แล้วนะครับ
Code (JavaScript)
var path = '/Content/img/Login-bg/';
var bgArray = ['51090.jpg', '51093.jpg', '51112.jpg', '51119.jpg'];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];
var imageUrl = path + bg;
$('body').css('background-image', 'url(' + imageUrl +')');
จากที่เขียนไว้คือกำหนดชื่อไฟล์สำหรับภาพพื้นหลังแล้ว
แต่สิ่งที่ต้องการคือ ให้ Random จากไฟล์ทั้งหมดที่อยู่ใน Folder ครับ
หากมีการเพิ่มรูปภาพเข้าไปใน Folder จะได้ไม่ต้องมาแก้ Script
script นี้เหมือนขาดแค่ เอาชื่อไฟล์ทั้งหมดใน Folder มาเก็บไว้ในตัวแปร bgArray แต่ผมคิดไม่ออกว่ามันต้องเขียนยังไง
ขอบคุณครับ
โค้ดเต็ม
Code (PHP)
@using System.Configuration
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ConfigurationManager.AppSettings["SiteTitle"]</title>
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Thema/gentelella-master/vendors/bootstrap/dist/css/bootstrap.min.css")
@Styles.Render("~/Thema/gentelella-master/vendors/font-awesome/css/font-awesome.min.css")
@Styles.Render("~/Content/Style.css")
</head>
<body class="login dp-flex flex-c">
<script type="text/javascript">
var path = '/Content/img/Login-bg/';
var bgArray = ['51090.jpg', '51093.jpg', '51112.jpg', '51119.jpg'];
var bg = bgArray[Math.floor(Math.random() * bgArray.length)];
var imageUrl = path + bg;
$('body').css('background-image', 'url(' + imageUrl +')');
</script>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
Tag : .NET, HTML, CSS, HTML5, JavaScript, Web (ASP.NET)

|
ประวัติการแก้ไข 2019-11-18 14:08:22
|
 |
 |
 |
 |
Date :
2019-11-18 12:41:16 |
By :
Pla2todkrob |
View :
1050 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
getFiles to Array
|
 |
 |
 |
 |
Date :
2019-11-18 16:07:05 |
By :
T |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 02
|