javascript吧 关注：269,315贴子：906,485
- 3回复贴，共1页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<script type="text/javascript">
//数组：存储图片路劲
var imageArray=["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg"];
//即将显示的下一张图片在数组中的索引，因为页面初始化显示第一张图片，因此，下一张图片为第二张图片
var imageIndex=1;
//定时器
var imageTimer;
//改变图片以及对应序号的样式
//1.先根据当前应该显示的图片序号(imageIndex)更新图片和数字文本的样式
//2.再更新图片序号(为下一次显示做准备)
function modifyImageAndSpan(){
//找到<img>元素，修改其图片为当前应该显示的图片(下一张图片)
var image=document.getElementById("img1");
image.src=imageArray[imageIndex];
//修改<span>元素的样式：只有和图片一致的数字显示为current样式
var div=document.getElementById("indexDiv");
var spanNodes=div.getElementsByTagName("span");//
for (var i=0; i < spanNodes.length; i++) {
if(i==imageIndex){
spanNodes[i].className="curren";
}else{
spanNodes[i].removeAttribute("class");
}
//更新图片索引，用于下一次的图片显示，如果已经是最后一张图片，则重新开始
if(imageIndex == imageArray.length-1){
imageIndex=0;
}else{
imageIndex++;
}
};
}
//启动图片切换
function starRotate(){
//启动定时器，每3s修改一次，3s后修改时，直接显示为下一张图片
imageTimer=window.setInterval(modifyImageAndSpan,1000);
}
//定制图片切换
function stopRotate(){
//先判断是否有参数：有参数则根据参数更新 iamgeIndex,并立即切换到相应图片
if(arguments.length==1){
imageIndex=arguments[0];
modifyImageAndSpan();
}
}
//停止定时器
window.clearInterval(imageTimer);
</script>
<style type="text/css">
img{
width:200px;
}
div{
height: 50px;
width: 200px;
font-size: 12px;
border: 1px solid red;
}
div span{
padding:8px 10px;
background-color: #dddddd;
margin-right: 15px;
width: 200px;
line-height: 50px;
cursor: pointer;
}
span.curren{
background-color: red;
}
</style>
</head>
<body onload="startRotate();">
<form>
<h2>1.广告轮播</h2>
<img id="img1" src="images/a.jpg" onmouseover="stopRotate();" onmouseout="startRotate();" />
<div id="indexDiv">
<span class="curren" onmouseover="stopRotate(0);" onmouseout="startRotate();">1</span>
<span onmouseover="stopRotate(1);" onmouseout="startRotate();">2</span>
<span onmouseover="stopRotate(2);" onmouseout="startRotate();" >3</span>
<span onmouseover="stopRotate(3);" onmouseout="startRotate();" >4</span>
</div>
</form>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<script type="text/javascript">
//数组：存储图片路劲
var imageArray=["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg"];
//即将显示的下一张图片在数组中的索引，因为页面初始化显示第一张图片，因此，下一张图片为第二张图片
var imageIndex=1;
//定时器
var imageTimer;
//改变图片以及对应序号的样式
//1.先根据当前应该显示的图片序号(imageIndex)更新图片和数字文本的样式
//2.再更新图片序号(为下一次显示做准备)
function modifyImageAndSpan(){
//找到<img>元素，修改其图片为当前应该显示的图片(下一张图片)
var image=document.getElementById("img1");
image.src=imageArray[imageIndex];
//修改<span>元素的样式：只有和图片一致的数字显示为current样式
var div=document.getElementById("indexDiv");
var spanNodes=div.getElementsByTagName("span");//
for (var i=0; i < spanNodes.length; i++) {
if(i==imageIndex){
spanNodes[i].className="curren";
}else{
spanNodes[i].removeAttribute("class");
}
//更新图片索引，用于下一次的图片显示，如果已经是最后一张图片，则重新开始
if(imageIndex == imageArray.length-1){
imageIndex=0;
}else{
imageIndex++;
}
};
}
//启动图片切换
function starRotate(){
//启动定时器，每3s修改一次，3s后修改时，直接显示为下一张图片
imageTimer=window.setInterval(modifyImageAndSpan,1000);
}
//定制图片切换
function stopRotate(){
//先判断是否有参数：有参数则根据参数更新 iamgeIndex,并立即切换到相应图片
if(arguments.length==1){
imageIndex=arguments[0];
modifyImageAndSpan();
}
}
//停止定时器
window.clearInterval(imageTimer);
</script>
<style type="text/css">
img{
width:200px;
}
div{
height: 50px;
width: 200px;
font-size: 12px;
border: 1px solid red;
}
div span{
padding:8px 10px;
background-color: #dddddd;
margin-right: 15px;
width: 200px;
line-height: 50px;
cursor: pointer;
}
span.curren{
background-color: red;
}
</style>
</head>
<body onload="startRotate();">
<form>
<h2>1.广告轮播</h2>
<img id="img1" src="images/a.jpg" onmouseover="stopRotate();" onmouseout="startRotate();" />
<div id="indexDiv">
<span class="curren" onmouseover="stopRotate(0);" onmouseout="startRotate();">1</span>
<span onmouseover="stopRotate(1);" onmouseout="startRotate();">2</span>
<span onmouseover="stopRotate(2);" onmouseout="startRotate();" >3</span>
<span onmouseover="stopRotate(3);" onmouseout="startRotate();" >4</span>
</div>
</form>
</body>
</html>
