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时又让图片自动切换
}
}