简单的轮播图

简单的轮播图 

效果图，如下 ：

//这只是部分javascript 代码 ，以此类推    （代码可优化）

<script>
var q = 0;
window.onload = function (){

qq();

}
// 计时器函数
function time(){
q++;
timer = setTimeout("time()",2000);//延迟两秒调用
if (q == 3) {
q = 1;
};
//
$("image").src = "img/slider"+q+".jpg" ;

for (var i = 1; i < 4; i++) {
// 除了选中的是红色，其他都不是红色
if (q != i) {

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};
$("slider-image"+q).style.backgroundColor = "red";

}

//根据传入的id  来实现相对应的功能

function $(id){
return document.getElementById(id);
}

//传入圆点的id ->slider-image1
$("slider-image1").onmouseover = function(){
// 鼠标移动到圆点，停止计时器
clearInterval(timer);

//相对应的图片标签的id ->image

$("image").src = "img/slider1.jpg" ;
for (var i = 1; i < 4; i++) {

//选中第一个点
if (1 != i) {

//拼接id -->"slider-image"+i

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};
$("slider-image1").style.backgroundColor = "red";
q=1;

}
// 鼠标离开，开启计时器
$("slider-image1").onmouseout = function(){
q = 0;
time();
}

$("slider-image2").onmouseover = function(){
// 鼠标移动到圆点，停止计时器
clearInterval(timer);
$("image").src = "img/slider2.jpg";
for (var i = 1; i < 4; i++) {
if (2 != i) {

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};
$("slider-image2").style.backgroundColor = "red";
q=2;
}
// 鼠标离开，开启计时器
$("slider-image2").onmouseout = function(){
q= 1;
time();
}

$("slider-image3").onmouseover = function(){
// 鼠标移动到圆点，停止计时器
clearInterval(timer);
$("image").src = "img/slider3.jpg";
for (var i = 1; i < 4; i++) {
if (3 != i) {

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};
$("slider-image3").style.backgroundColor = "red";
q=3;
}
// 鼠标离开，开启计时器
$("slider-image3").onmouseout = function(){
q= 2
time();
}

// 右边按钮
$("arrowr").onclick = function(){
q++;
if (q == 4) {
q = 1;
};

for (var i = 1; i < 4; i++) {
if (q != i) {

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};
$("image").setAttribute('src','img/slider'+q+'.jpg');

$("slider-image"+q).style.backgroundColor = "red";
}
// 左边按钮
$("arrowl").onclick = function(){
q--;
if (q <= 0) {
q = 3;
};

for (var i = 1; i < 4; i++) {
if (q != i) {

$("slider-image"+i).style.backgroundColor = "rgb(63,59,65)";

};
};

$("image").setAttribute('src','img/slider'+q+'.jpg');

$("slider-image"+q).style.backgroundColor = "red";
}
</script>