当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用JavaScript制作一个好看的轮播图

使用JavaScript制作一个好看的轮播图

2018年10月23日  | 移动技术网IT编程  | 我要评论

目录

使用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代码

  1. 其中用一个变量i的余数来判断当前是第几张图片。
  2. 通过changeimg函数来控制图片的切换。
  3. 有一个2秒的计时器，每2秒i值加1。
  4. b3是100ms执行一次，检测i值是否改变，并调用changeimg函数来切换图片。
  5. b1和b2是左右切换，a1-a4是任意切换，他们除了要完成相应的切换（i++/i--/i=400/401/...）之外，还要调用changeimg函数，最后要重置一下2秒自动轮播的定时器。
  6. 这个文件的名字，嗯，就是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）话说我真的觉得挺好看的做的~

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网