简单的轮播图
效果图，如下 ：
//这只是部分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>