當前位置:首頁 » 背景圖片 » 前端定時更換的背景圖片變換
擴展閱讀
手機京東怎麼發圖片 2024-11-15 22:27:08
ps怎麼摳圖片背底 2024-11-15 22:13:25
搜索大魚海參的圖片 2024-11-15 22:07:25

前端定時更換的背景圖片變換

發布時間: 2022-05-20 02:05:10

『壹』 怎樣設置在網頁中背景圖片的自動更換

<script>
window.onload=function(){
var bkimgs=["images/image1.jpg","images/image2.jpg","images/image3.jpg"];
var bki=0;
setInterval(function(){
var body=document.getElementsByTagName("body")[0]
body.style.backgroundImage="url("+bkimgs[bki]+")";
bki=(bki+1)%bkimgs.length;
},5000);
}
</script>

『貳』 html中怎樣控制每隔一段時間變換一次背景圖片

用個timer將timer的interval設置為5000,在timer的事件中寫代碼更新文本框中的值

『叄』 用js定時器切換背景圖片,詳細看下面代碼,求js高手

你背景圖片就設置了一個2.jpg再切換也是這一張圖片啊
如果有多張圖片比如說1-10.jpg,那就把oS.backgroundImage='url(2.jpg)';改為oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)';

『肆』 背景圖片自動變換如何設置

打開有圖片的文件夾,找到需要設置為背景的圖片:
右擊之,從彈出的菜單命令中選擇「設置為桌面背景」命令即可:
而如果你要設置圖片文件夾,則在桌面上空白處右擊,選擇「個性化」命令:
在彈出的「個性化」窗口中單擊「桌面背景」:
在彈出的窗口中,通過「瀏覽」找到需要的圖片文件夾,再點擊「全選」:
然後再在下方設置需要的規則,點擊「保存更改」按鈕:
之後,在桌面空白地方右擊,選擇「下一個桌面背景」即可快速切換背景了:

『伍』 前端exe怎麼讓客戶自己替換圖片

圖片替換主要是指將文字替換成圖片的技術,即在html語句中使用文字,瀏覽器顯示時用對應的圖片顯示。其意義在於便於做網站優化(SEO),文字才是搜索引擎尋找的主要對象。

經典的替換方法:

  • Fahrner圖片替換法(FIR)

  • 源碼:

    Html:

    <h1 id="fir"><span>Fahrner Image Replacement</span></h1>

    CSS:

    #fir {

    width: 287px;

    height: 29px;

    background: url(fir.gif) no-repeat;

    }

    #fir span {

    display: none;

    }

    解釋:

    首先添加一個<span>標簽,然後使用<span>標簽的display屬性把文字隱藏起來,最後指定<h1>的背景圖片。

    優點:使用CSS而不是標記語法提供圖片,更改圖片只需更改CSS。

    缺點:(1)需要一組不具備任何語義的<span>標簽才能運作(2)display屬性影響屏幕閱讀器使用者(3)關閉瀏覽器顯示圖片,同時啟用CSS支持時,文字圖片均不可顯示。

    2.Leahy/Langridge圖片替換法(LIR)

    源碼:

    Html:

    <h1 id="lir">Leahy/Langridge Image Replacement</h1>

    CSS:

    #lir {

    padding-top:image height;

    overflow:hidden;

    background:url(lir.gif) no repeat;

    height:0 !important; //針對大多數瀏覽器

    height:image height; //針對IE5

    }

    解釋:

    首先將padding-top設置為圖片高度,將h1高度設置為0(IE5下設置為圖片高度),根據盒子模型可知,文字內容將被排擠到指定高度之外,同時設置overflow:hidden將溢出文字隱藏。

    優點:(1)去掉冗餘的<span>標簽(2)不影響屏幕閱讀器使用者

    缺點:(1)關閉瀏覽器顯示圖片,同時啟用CSS支持時,文字圖片均不可顯示(2)要為IE5 for Windows使用盒模型Hack。

    3.phark圖片替換法

    源碼:

    Html:

    <h1 id="phark">The Phark Method</h1>

    CSS:

    #phark {

    height: image height;

    text-indent: -5000px;

    background: url(phark.gif) no-repeat;

    }

    解釋:設置text-indent屬性為很大的負值,將文字顯示在屏幕之外,達到隱藏的效果。

    優點:(1)不需要額外標簽(2)不影響屏幕閱讀器使用者

    缺點:關閉瀏覽器顯示圖片,同時啟用CSS支持時,文字圖片均不可顯示

『陸』 html中怎樣定時變換背景圖片

1.准備相關圖片(1.jpg,2.jpg...n.jgp)
2.編寫一個html頁面 用以顯示圖片
並設置為自動定時更新圖片
3.將改html頁面 設置為桌面背景
該「桌面」隔定時自動刷新 更新圖片顯示
===============================================
1.將自己需要的圖片 如英語小卡片 名人名言等
集結在一個文件夾下 並進行命名 如1.jpg,2.jpg...
這樣在最後的桌面上 就可以學習英語或名言了
2.編寫如下示例的html頁面 放在該圖片文件夾中
假設該html頁面 名稱為myPicDesktop.html

其中之所以設置td的寬度為50%
是想控制項圖片的顯示位置在桌面的右半部
因為通常桌面的左半部都有很多圖標
示例代碼如下:

<html>
<head>
</head>
<script language="javascript">

window.onload=refleshDesktopPic

function refleshDesktopPic()
{
var i = 1;
var j = 0; //圖片的順序號
var k = 8; //圖片的張數
var m = 30*1000; //每張顯示的時間 毫秒
var n = 2; //循環遍數
//
while(i<=(n*k))
{
j= i%k;//應該循環第幾張圖片以顯示

if(j==0)
j=k;//最後一張圖片的序號

//隔一短時間後 再替換為另一張圖片
setTimeout("setPic("+j+")",(m*i) );

i = i+1;
}
}

function setPic(picSeqNum)
{
document.all.myDiv.innerHTML = "<image id='image2' src='"+picSeqNum+".jpg'></image>";
}

</script>
<body>
<table width="100%">
<tr>
<td width="50%">
</td>
<td>
<div id="myDiv">
<image id="image1" src="1.jpg"></image>
</div>
</td>
</tr>
</table>
</body>
</html>

3.以Win2003系統為例
桌面->右鍵->屬性->桌面標簽頁
->自定義桌面->打開「桌面項目」設置框
->Web標簽頁
->點擊 新建 按鈕
->打開 「新建桌面項目」設置框
->點擊 瀏覽 按鈕
->找到 第2步所編輯的myPicDesktop.html
->確定 ->應用 ->確定

可以查看效果
起初 該html頁面做為桌面 並沒有最大化展開
而是 縮小的顯示在桌面的右中部
可以滑鼠放上去 在頁面的右上角 點擊最大化按鈕
以使html頁面有桌面那麼大顯示
當想關閉該html頁面時 同樣點擊該頁面的右上角的關閉按鈕即可
就像正常的網頁一樣操作就好

『柒』 想實現一個功能:網頁背景圖片每天自動更換

<html>
<body id="kk" background="1.jpg">
測試<br>
</body>

<script type="text/javascript">
// 下面是用遞歸寫的,一定要加在網頁末端,注意背景圖片地址,自己根據情況改

function change(){
var myDate() = new Date()();
// 每天換背景圖片
flag = myDate().getDate(); //獲取當前日(1-31)
// 這句注釋可以去掉看看效果,每分鍾換一張圖片,因為一天時間太長了不便於調試
//flag = myDate.getMinutes(); //獲取當前分鍾數(0-59)

var img1= document.getElementById('kk');
//比如你有三張背景圖,1.jpg,2.jpg和3.jpg,
//判斷時間中的日:1-31,或者1-30(還有其他的閏 年就不舉例了)和3的余數
//然後加1,因為余數范圍0-2
// 你的描述有點隱晦,你有幾張圖片輪換,什麼時候顯示,可以根據時間設定flag規則
flag = flag%3+1;
img1.style.background="url("+flag+".jpg)";;
// 注意函數格式:function(){函數名}
window.setTimeout(function(){change()},1000);//每隔一秒判斷一次系統時間
}
change();

</script>
</html>

『捌』 如何用代碼實現在不同時間段更換不同頁面背景圖片

if (hours>=0 && hours <=12){
timeValue +=" 上午好!"
document.body.style.backgroundImage = "上午的背景";
}

不知道對不對..

『玖』 JS/Jquery,如何實現背景圖片的更換

你好,Jquery修改背景圖片方法如下:
$("這里寫css選擇器").css("background-image","url(這里填圖片路徑)");
或者
$("css選擇器").css({"background-image":"url(圖片路徑)"});
比如修改一個p標簽的背景為bjt.jpg可以寫成:
$("p").css({'background-image':'url(bjt.jpg)'})

『拾』 如何將網頁的背景圖片3秒後變成另外一張圖片

將網頁背景圖片設置為3秒自動更換:
function changeBG()
{
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(yourimage.xxx)";
setTimeout("changeBG",3000); //
}