html代碼
----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>簡單輪播圖</title>
<link href="../css/StyleSheet1.css" rel="stylesheet" />
<script src="../jacascript/JavaScript1.js"></script>
</head>
<body>
<div id="main">
<a href="http://www.hao123.com"><img class="pic" style="display:block;" src="../images/t013499f22a7eba268c.jpg" /></a>
<a href="http://www.hao123.com"><img class="pic" src="../images/t010ca6934adea4b2dd.jpg" /></a>
<a href="http://www.hao123.com"><img class="pic" src="../images/t01567e928742297a81.jpg" /></a>
<a href="http://www.baidu.com"><img class="pic" src="../images/t019d2a27609e61b431.jpg" /></a>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------------
css 代碼
-------------------------------------------------------------------------------------------------------
*{
margin:0;
padding:0;
}
#main{
margin:50px auto;
width:514px;
height:240px;
background:#ff6a00;
overflow:hidden;
border:dashed #b4a8a8;
}
.pic{
width:514px;
height:240px;
}
-------------------------------------------------------------------------------------
javascript 代碼
-----------------------------------------------------------------------------------------
window.onload = function () {
var div = document.getElementById('main');//通過id查找div
var img = div.getElementsByTagName('img');//通過div查找div下的所有img標簽（獲取所有的圖片）
//通過getElementsByTagName 獲取的標簽是一個數組
var count = 0;//定義一個變量用來記錄圖片數組下標
var timer = null;//定義一個變量標識時器
timer=setInterval(change ,2000);//啟動一個定時器2000毫秒調用一次change函數（切換一張圖片）
function change() {//切換圖片的函數
for (var i = 0; i < img.length; i++) {//遍歷所有圖片
img[i].style.display = 'none';//先讓所有圖片隱藏
}
img[count].style.display = 'block';//讓當前下標的圖片顯示
count++;//每次加1
if (count == img.length) {
//當count==圖片張數時讓count=0；
count = 0;//使圖片數組下標又回到0就形成了一個循環那么就可以讓圖片循環切換了
}
}
div.onmouseover = function () {
clearInterval(timer);//當鼠標移入Div時清除定時器，作用是當我們鼠標移入圖片時
//圖片就不再自動切換
}
div.onmouseout = function () {
timer = setInterval(change, 2000);//當鼠標移入Div時開啟定時器，作用是當我們鼠標移
//出div時又讓圖片自動切換
}
}