欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-21 10:30:07
[TOC] 使用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 2a ......

目录

使用javascript制作出好看的轮播图效果

准备材料

1.图片若干张（包括轮播图和按钮的图片）

使用JavaScript制作一个好看的轮播图
1.jpg
使用JavaScript制作一个好看的轮播图
2.jpg
使用JavaScript制作一个好看的轮播图
3.jpg
使用JavaScript制作一个好看的轮播图
4.jpg
使用JavaScript制作一个好看的轮播图
1.png
使用JavaScript制作一个好看的轮播图
2.png
使用JavaScript制作一个好看的轮播图
3.png
使用JavaScript制作一个好看的轮播图
4.png
使用JavaScript制作一个好看的轮播图
a1.png
使用JavaScript制作一个好看的轮播图
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）话说我真的觉得挺好看的做的~

上一篇： JS性能优化 之 FOR循环

下一篇： javaScript真值和假值以及相等操作符

推荐阅读