JS切换图片
用js，做图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0px;
}
ul li{
list-style: none;
}
.scroll_mid{
background-color:#f2f2f3;
border-left:solid 1px #d6d5d6;
border-right:solid 1px #d6d5d6;
width:533px;
padding:5px 0px 5px 5px;
margin: 0px auto;
}
#scroll_number{
float: right;
padding-right:10px ;
}
#dd_scroll{ /*FF*/
float:none;
}
*html #dd_scroll{
float:left; /*IE6*/
}
*+html #dd_scroll{
float:left; /*IE7*/
}
#scroll_number{
/* float:right; */
padding-right:10px;
}
#scroll_number li{
width:13px;
height:13px;
text-align:center;
border:solid 1px #999;
margin-top:5px;
font-size:12px;
line-height:16px;
cursor:pointer;
}
.scroll_number_out{
}
.scroll_number_over{
background-color:#F96;
color:#FFF;
}
.scroll_end{
background-image:url(../images/dd_scroll_end.gif);
width:540px;
height:8px;
background-repeat:no-repeat;
margin-bottom:10px;
}
</style>
<script type="text/javascript">
//当我们的页面加载完成之后才执行图片切换
window.onload = init;
var dd_scroll; //将其定义成全局变量
//当页面加载完成执行init方法(函数)
function init(){
dd_scroll = document.getElementById("dd_scroll");
调用定时器();
}
var time;
//定时器方法
function 调用定时器(){
//执行一个周期性定时器
time = setInterval("图片切换()",1000);
}
var i = 1;
//图片切换的方法
function 图片切换(){
++i;
//我们的图片一共只有6张,所以大于6之后就需要在从1开始
if(i > 6){
i = 1; //如果大于6张,则图片从1开始从新切换
}
//修改元素对象中的src地址,实现我们的图片切换
// dd_scroll.src = "img/dd_scroll_"+i+".jpg";
dd_scroll.src = "img/图"+i+".jpg";
//图片的自动增长
//调用背景切换的方法
背景颜色切换();
}
//当我们的鼠标移入到图片范围中时,自动的停止图片切换
function stop(){
clearInterval(time);
}
//当我们的鼠标移出图片范围时,自动开始图片切换
function start(){
调用定时器();
}//背景颜色切换方法
function 背景颜色切换(){
//1. 获取所有的ul li取消每个li的背景颜色
var scroll_number = document.getElementById("scroll_number");
var lis = scroll_number.getElementsByTagName("li");
//取消所有li的背景颜色
var len = lis.length;
for(var s=0; s<len; s++){
//获取数组中每一个值,将背景色设置为空
lis[s].style.background = "";
}
//设置对应图片的背景颜色
var scroll_number_backg = document.getElementById("scroll_number_"+i);
//设置对应li的背景颜色
scroll_number_backg.style.background = "orange";
}
</script>
</head>
<body>
<div class="scroll_mid">
<img src="img/图1.jpg" onmouseout="start()" onmouseover="stop()" alt="轮换显示的图片广告" id="dd_scroll" width="398" height="163">
<div id="scroll_number">
<ul>
<li id="scroll_number_1" style="background-color: orange">1</li>
<li id="scroll_number_2" style="">2</li>
<li id="scroll_number_3" style="">3</li>
<li id="scroll_number_4" style="">4</li>
<li id="scroll_number_5" style="">5</li>
<li id="scroll_number_6" style="">6</li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号