生活中經常看到，像新浪等很多門戶網站的首頁都有滾動圖片的展示，如下圖所示：
某網站首頁滾動切換圖片
這樣不但可以減少文字的單一、乏味，而且可以直觀內容，更好的吸引用戶。那在我們做軟件系統時，是否也可以首頁中加入滾動圖片呢？答案是肯定的。
今天就給大家介紹三種類似的展現方式。實現方式這些滾動展現方式，主要用到了我們平常學習到的網頁HTML、樣式CSS和JavaScript等知識。在具體實現時，需要結合實際效果，綜合運用這些知識。
先準備3張大小相同的圖片，接著就需要我們編寫代碼來實現了。具體如下：
1、鼠標移動到圖片編號上改變圖片
1.1、運行效果
先看運行效果。當把鼠標移到右下角紅色框中的“1”時，顯示如下圖所示：
鼠標移到1號圖時顯示第一張圖
把鼠標移到右下角紅色框中的“2”時，顯示如下圖所示：
鼠標移到2號圖時顯示第二張圖
1.2、實現思路
因為圖片是在同一個方框區域顯示的，所以，顯示其中一張圖片時，其他圖片就不能顯示出來。切換圖片的關鍵是，把顯示圖片
網頁怎么知道用戶移動了鼠標呢？這里就涉及到div標簽的onmousemove事件。這個事件就可以檢測用戶是否移動了鼠標，因此我們修改圖片文件名的代碼，就應該在這個事件中進行處理。
那么多的div標簽，該修改哪個div標簽的background屬性的值呢？我們可以用document對象的getElementById方法，通過指定要修改的div標簽的id值(比如
鼠標移動到圖片編號上改變圖片關鍵代碼
注意要點：
①URL統一資源定位,在WWW上，每一信息資源都有統一的且在網上唯一的地址。
②雙引號“和單引號‘同時出現時，要間隔使用，而不能交替使用。即可以是“"xxx'yyy' zzz"”或“'xxx"yyy "zzz'”，而不能是“"xxx'yyy" zzz'。
③這里為了簡單起見，我們把圖片按順序進行編號，比如1.jpg、2.jpg，依次類推。
④圖片編號的紅色框在正式的軟件系統設計中不加，這里加上是為了突出編號位置。
1.3、具體實現
Document/* 圖片顯示div */
#divMap1
{
border:1px solid #dddddd;
width:243px;
height:300px;
background:url(1.jpg);
}
/* 圖片導航控制div */
#divNavgate1
{
border:0px solid red;
width:40px;
height:20px;
position:absolute;
left:210px;
top:337px;
color:white;
text-align:center;
font-weight:bold;
}
/* 圖片1導航控制div */
#divMap11
{
border:1px solid red;
width:10px;
height:20px;
color:gray;
float:left;
text-align:center;
font-weight:bold;
}
/* 圖片2導航控制div */
#divMap12
{
border:1px solid red;
width:10px;
height:20px;
color:gray;
float:left;
text-align:center;
font-weight:bold;
}
/* 圖片3導航控制div */
#divMap13
{
border:1px solid red;
width:10px;
height:20px;
float:left;
color:gray;
text-align:center;
font-weight:bold;
}
圖片切換1:鼠標移動到不同編號時切換圖片
2、鼠標移動到圖片編號上點擊后改變圖片
這個和上一種“鼠標移動到圖片編號上改變圖片”基本相同，不同的是：這里需要移到圖片編號上點擊才更換圖片，因此這里用到的事件是div標簽的onclick單擊事件。把上述代碼的onmousemove事件修改為onclick就可以了。
移到圖片編號上點擊改變圖片關鍵代碼
3、每隔一定時間間隔自動切換圖片
上述2種都需要操作鼠標，顯得比較麻煩。我們在設計程序的時候，可不可以每隔一定時間間隔自動切換圖片呢？就像鬧鐘一樣到時就鬧。當然是可以的。
“每隔一定時間間隔自動處理某個事件”，需要用到JavaScript的setInterval方法，該方法有2個參數。第一個指定要每隔一定時間間隔自動處理的某個事件名稱，第二個參數指定時間間隔，注意單位是毫秒。比如：
setInterval(changeMap,1500);//循環調用切換圖片的changeMap()函數，時間間隔為1000毫秒
每隔一定時間間隔自動切換圖片關鍵代碼
其效果圖如下：
每隔一定時間間隔自動切換圖片
完整代碼如下：
Document/* part 3*/
#divMap3
{
border:1px solid #dddddd;
width:243px;
height:300px;
background:url(1.jpg);
}
/* 圖片導航控制div */
#divNavgate3
{
border:0px solid red;
width:40px;
height:20px;
position:absolute;
left:210px;
top:340px;
color:white;
text-align:center;
font-weight:bold;
}
/* 圖片1導航控制div */
#divMap31
{
border:1px solid red;
width:10px;
height:20px;
color:gray;
float:left;
text-align:center;
font-weight:bold;
}
/* 圖片3導航控制div */
#divMap32
{
border:1px solid red;
width:10px;
height:20px;
color:gray;
float:left;
text-align:center;
font-weight:bold;
}
/* 圖片3導航控制div */
#divMap33
{
border:1px solid red;
width:10px;
height:20px;
float:left;
color:gray;
text-align:center;
font-weight:bold;
}
window.οnlοad=function(){
var imgs =["1.jpg", "2.jpg", "3.jpg"]; //設定想要顯示的圖片
var i = 1;
var map=document.getElementById("divMap3");//獲取DIV對象
map.style.background="url(1.jpg)"; //設置初始圖片為1.jpg
function changeMap(){
i++;
i=i%3; // 超過3則取余數，保證在1、2、3之間循環
map.style.background="url("+imgs[i]+")";
}
setInterval(changeMap,1500);//循環調用changeMap()函數，時間間隔為1000毫秒
}
完成圖片切換，用到了簡單的CSS樣式和JavaScript代碼，簡單且容易動手。大家也快動手試試吧。
舉報/反饋
處理加載非AMD規范的js庫)
)
, notify(),sleep具體解釋)
...)
![[轉]wireshark 實用過濾表達式（針對ip、協議、端口、長度和內容） 實例介紹](http://pic.xiahunao.cn/[轉]wireshark 實用過濾表達式（針對ip、協議、端口、長度和內容） 實例介紹)
![[Flexbox] Using order to rearrange flexbox children](http://pic.xiahunao.cn/[Flexbox] Using order to rearrange flexbox children)
