簡單的輪播圖
效果圖，如下 ：
//這隻是部分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>