验证中...
私信发送成功
片段 1 片段 2
gistfile1.txt
原始数据 复制代码
window.onload=function(){
//声明一个变量用来存放时间
var timer = "";
//定义一个图片初始值
var k = 0;
//声明一个数组,用来装图片路径
var imageArray = new Array("images/one.jpg","images/two.jpg","images/san.jpg");
//获取图片对象
var getImage = document.getElementsByTagName("img")[0];
//获取ul对象
var getUl = document.getElementsByTagName("ul")[0];
//获取li对象
var getLi = document.getElementsByTagName("li");
//动态添加li(圆点)
for(var i=0;i<imageArray.length;i++){
getUl.innerHTML+="<li>"+(i+1)+"</li>";
}
//默认第一张图片
getImage.src=imageArray[0];
//默认刚加载页面的时候,第一个li添加背景颜色
getLi[0].style.background="red";
//设定定时器
timer=setInterval(move,1000);
//让图片动起来的方法
function move(){
//0 1 2 3 4
if(k<imageArray.length-1){k++;}else{k=0;}
getImage.src=imageArray[k];
//清除所有li的红色背景颜色
for(var i =0;i<getLi.length;i++){
getLi[i].style.background="";
}
//给当前对应图片的li添加一个背景图片
getLi[k].style.background = "red";
//查找鼠标移动到某个li的上面
for(var i=0;i<getLi.length;i++){
//把当前的i当做一个li的索引
getLi[i].index=i;
//鼠标移动到li上面的时候,停止自动轮播
getLi[i].onmouseover=function(){
//清除自动轮播
clearInterval(timer);
//怎么知道鼠标移动到哪个li上呢?
//alert(this.index)
getImage.src=imageArray[this.index];
//清除所有li的红色背景颜色
for(var i =0;i<getLi.length;i++){
getLi[i].style.background="";
}
//改变当前的li的背景颜色
getLi[this.index].style.background="red";
k=this.index;//改变当前索引
}
//鼠标移除li后自动启用轮播
getLi[i].onmouseout=function(){
timer=setInterval(move,1000);
}
}
}
}
2.png

评论列表( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close