测试2

目录

使用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）话说我真的觉得挺好看的做的~

内容来源于网络如有侵权请私信删除
标签： javascript 技术文章 开发
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

CSS3样式设计
4802 0元 限免
Web前端入门教程
5905 9.8元