使用JavaScript制作一个好看的轮播图
目录
使用JavaScript制作出好看的轮播图效果
准备材料
1.图片若干张（包括轮播图和按钮的图片）
1.jpg
2.jpg
3.jpg
4.jpg
1.png
2.png
3.png
4.png
a1.png
a2.png
2.将按钮的图片应用到按钮上的CSS样式文件
我取名为b1-2a1-4.css，其中b1和b2是左右选择的按钮，a1-4是跳转到1到4中的一张图的按钮。
.b1 {
width: 62px;
height: 94px;
background: url(image/a1.png);
position: absolute;
top: 200px;
left: 7px;
}
.b2 {
width: 62px;
height: 94px;
background: url(image/a2.png);
float: left;
position: absolute;
top: 200px;
left: 677px;
}
.a1 {
width: 29px;
height: 29px;
background: url(image/1.png);
position: absolute;
top: 420px;
left: 600px;
}
.a2 {
width: 29px;
height: 29px;
background: url(image/2.png);
position: absolute;
top: 420px;
left: 630px;
}
.a3 {
width: 29px;
height: 29px;
background: url(image/3.png);
position: absolute;
top: 420px;
left: 660px;
}
.a4 {
width: 29px;
height: 29px;
background: url(image/4.png);
position: absolute;
top: 420px;
left: 690px;
}
3.实现轮播和点击跳转的JavaScript代码
- 其中用一个变量i的余数来判断当前是第几张图片。
- 通过changeImg函数来控制图片的切换。
- 有一个2秒的计时器，每2秒i值加1。
- b3是100ms执行一次，检测i值是否改变，并调用changeImg函数来切换图片。
- b1和b2是左右切换，a1-a4是任意切换，他们除了要完成相应的切换（i++/i--/i=400/401/...）之外，还要调用changeImg函数，最后要重置一下2秒自动轮播的定时器。
- 这个文件的名字，嗯，就是b1-3a1-4.js
var i = 400;
var img = document.getElementById("img1");
var timeID;
timeID = setInterval("i++", 2000);
function changeImg(i) {
var imgs;
if(i % 4 == 0) {
imgs = "image/1.jpg";
} else if(i % 4 == 1) {
imgs = "image/2.jpg";
} else if(i % 4 == 2) {
imgs = "image/3.jpg";
} else {
imgs = "image/4.jpg";
}
return imgs;
}
function b1() {
i--;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function b2() {
i++;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function a1() {
i = 400;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function a2() {
i = 401;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function a3() {
i = 402;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function a4() {
i = 403;
var img = document.getElementById("img1");
img.src = changeImg(i);
clearInterval(timeID);
timeID = setInterval("i++", 2000);
}
function b3() {
var img = document.getElementById("img1");
img.src = changeImg(i);
}
setInterval("b3()", 100);
4.用html将他们联系起来！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="b1-2a1-4.css" />
<script src="b1-3a1-4.js" type="text/javascript"></script>
</head>
<body>
<img src="image/1.jpg" id="img1"/>
<input type="button" class="b1" onclick="b1()"/>
<input type="button" class="b2" onclick="b2()"/>
<input type="button" class="a1" onclick="a1()"/>
<input type="button" class="a2" onclick="a2()"/>
<input type="button" class="a3" onclick="a3()"/>
<input type="button" class="a4" onclick="a4()"/>
</body>
</html>
完工！（这其实是之前做的，拿来凑数233333）话说我真的觉得挺好看的做的~
