JavaScript实现类似京东首页“简易轮播图“制作教程

原创已于 2023-08-14 10:23:22 修改 · 814 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2023-03-21 13:55:15 首次发布

该文介绍了如何使用JavaScript创建一个简单的图片轮播效果，包括定义初始图片、设置图片切换变量、编写切换函数、利用定时器自动切换以及添加上一页和下一页按钮的功能。通过点击按钮和自动间隔切换，展示了一种基础的网页动态效果。

1.首先在body标签內需要定义一张默认的图片

<img src="image/banner_1.jpg" id="qwe" />

2.首先定义一个变量代表图片名称

例如:a1=1;

3.接下来定义一个函数function run(){

a1++;//代表图片切换

if(a1>3){//判断是否已经到达最后一张图片

a1=1;//重置a1

}

document.getElementById("qwe").src="image/"+a1+".jpg";//更高图片为下一张

}

3.通过定时器来设置轮播效果

setInterVal(run,2000);//第一个参数代表要执行的函数,第二个代表毫秒;

4.如果需要左右按钮可以在body中设置

<input type="button" id="zdj" onclick="z()" value="上一页"/>//代表上一页的按钮

对应的js函数:

function z(){
    a1--;
    if (a1<1){
        a1=3;
    }
    document.getElementById("a1").src="image/banner_"+a1+".jpg";
}

5.右边按钮

body定义

<input type="button" id="ydj" onclick="run()" value="下一页"/>

对应的js函数:

function run(){
    a1++;
    if (a1>3){
        a1=1;
    }
    document.getElementById("a1").src="image/banner_"+a1+".jpg";
}

完整的代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<from >
    <input type="button" id="zdj" onclick="z()" value="上一页"/>
  <img src="image/banner_1.jpg" id="a1" />
    <input type="button" id="ydj" onclick="run()" value="下一页"/>

</from >
</body>
</html>

<script>
    a1=1;
    function z(){
        a1--;
        if (a1<1){
            a1=3;
        }
        document.getElementById("a1").src="image/banner_"+a1+".jpg";
    }
    function run(){
        a1++;
        if (a1>3){
            a1=1;
        }
        document.getElementById("a1").src="image/banner_"+a1+".jpg";
    }
    setInterval(run,2000);
</script>