简单的轮播图实现( 二 ) _轮播

2、在实现上一张、下一张以及对应p标签下边框、a标签背景色变化的时候，我们首先都需要获取到当前显示的图片在数组中的索引，拿到p标签和a标签所在的集合中，否则，小圆点和上一张、下一张的点击事件就不会联系，即就算点击第三个小圆点显示第三张照片后，点击下一张，显示的会是第二张，而非第四章，在这里，我将这些功能事件放到一个函数中，调用执行
3、每当索引发生变化时，背景色就会随机变为一种颜色，这里我将背景色的随机事件也写在一个函数中，并且在每一个点击事件中调用
4、具体代码如下：
封装的函数：
my$(id){
.(id);
}
//获取随机色
(){
var r=Math.round(Math.()*255);
var g=Math.round(Math.()*255);
var b=Math.round(Math.()*255);
.body.style.="rgb("+r+","+g+","+b+")";//设置页面背景色
}
//获取当前img下标
(){
for(var i=0;i
//判断当前img的src和a标签href相等，即可取到对应a标签的下标，取出下标并出去，在外部定义返回值为index ，作为实参赋值给下面的函数()
if(img.src=http://www.kingceram.com/post/=arr[i]){
i;
}
}
}
// 得到函数返回的下标值，遍历集合，修改对应p标签和a标签的class名
(){
for(var i=0;i
//首先要清空p标签和a标签所有的class设置
links[i].("class","");
simg[i].("class","");
}
//给对应的p标签和a标签设置class属性，由于css中写好了样式，所以会直接体现出来
links[].("class","red");
simg[].("class","");
}
代码：
var left=my$("left");
var right=my$("right");
var box=my$("box");
var oimg=my$("img");
var p=my$("p");
//获取a标签集合
var links=.("#link a");
//获取p标签集合
var simg=.("#p p");
// 定义空数组,用来存放a标签的href地址
var arr=[];
// 给body设置延时属性
.body.style.='all 1s';
//将a标签的href地址放入数组
for(var i=0;i
arr[i]=links[i].href
}
//小圆点事件
//遍历a标签所在的links集合
for(var i=0;i
// 取到每一个小圆点(a标签)
var link=links[i];
//点击事件
link.=(){
// 将当前正在被点击的a的href赋值给img标签
//由于程序一加载完成， for循环就已经执行完成， i变为最大值，所以此处不能直接写links[i] ，而是使用this
// this:事件源,指当前被点击的a
【简单的轮播图实现】oimg.src=http://www.kingceram.com/post/this.href;
//调用函数,改变背景色
();
//调用函数,获取当前显示的a标签的数组下标
();
var index=();
//调用函数,且实参为当前img标签下标值
(index);
//取消a标签的默认跳转行为
false;
}
}
//上一张
left.=(){
//调用函数,改变背景色
();
//调用函数,获取当前显示的a标签的数组下标
();
var index=();
// 判断:
// 如果当前下标为0,则跳转到最后一张,即下标为arr.-1
// 如果不为0,则跳转到上一张,即下标为index-1;
if(index==0){
img.src=http://www.kingceram.com/post/arr[arr.-1]
index=arr.-1;
}else{
img.src=http://www.kingceram.com/post/arr[index-1];
index--;
}
//调用函数,且实参为当前img标签下标值