如图做一个类似网易广告 点击左边的相关新闻就可以切换中间的图片!
下面我们来分析一下。
1.获取相关节点 左边的五个和中间的一个盒子
2.绑定点击事件
3.设置左边盒子的背景变化
那么我们用如下代码 !
alldiv[0].style.backgroundColor="black"
img2.src=arr2[0]
var iii=0
for(i=0;i<allAA.length;i++)
{
alldiv[i].num=i
alldiv[i].onclick=function(){
iii=this.num
img2.src=arr2[iii]
setAA()
}
}
function setAA(){
for(i=0;i<alldiv.length;i++){
alldiv[i].style.backgroundColor=""
}
alldiv[iii].style.backgroundColor="black"
}
第一句代码用来设置 左边第一个盒子的默认背景颜色
第二句代码用来设置 中间图片的默认链接
第三句代码用来创建一个 默认的索引
注意!!! for循环绑定是循环完了之后再执行点击响应函数
所以我们为 每个盒子添加一个标记,用来区别是哪个盒子
就用到了 .num 属性!
setAA()函数是用来 设置点击之后的背景变化
谢谢观看!