js轮播图

html部分：建立div，内嵌img标签，可以设置大小，

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript" src="untitled1.js"></script>

</head>

<body>

<div id="quyu" style="width: 1000px;height: 500px;background: #3BE3C6;margin: 0 auto" >

    <img id="im" onMouseOver="stop()" onMouseOut="start()" src="../../1.jpg" alt="" height="500px" width="1000px">

</div>

<center>

    <button onClick="before()">上一页</button>

    <button class="butt" onClick="xx(0)" style="color: red;">1</button>

    <button class="butt" onClick="xx(1)">2</button>

    <button class="butt" onClick="xx(2)">3</button>

    <button class="butt" onClick="xx(3)">4</button>

    <button onClick="next()">下一页</button>

</center>

</body>

</html>

js部分

设置全局变量，表示图片地址数组的下标

轮播功能，设置定时器，定时替换图片地址

鼠标移入，定时器停止

鼠标移出，再次设置定时器

上一页，全局变量减1

下一页，全局变量加1

// JavaScript Document

var n = 0; //图片下标

var imDom = null; //图片

var imPath = ["../../1.jpg", "../../2.jpg", "../../3.jpg", "../../4.jpg"];//图片位置

var intervalobj = null;//定时器

var btnDom = null;//数字按钮

window.onload = function () {

    imDom = document.getElementById("im");

    btnDom = document.getElementsByClassName("butt");

    intervalobj = setInterval(function () {

        lunbo();

    }, 3000);

}

/*功能：图片轮播*/

function lunbo() {

    n++;

    if (n >= imPath.length) {

            n = 0;

        }

    imDom.src = imPath[n];

    for (var i = 0; i < btnDom.length; i++) {

        btnDom[i].style.color = "black";

    }

    btnDom[n].style.color = "red";

}

/*鼠标移入，轮播停止*/

function stop() {

    clearInterval(intervalobj);

}

/*鼠标移入 轮播继续*/

function start() {

    intervalobj = setInterval(function () {

        lunbo(n);

        n++;

        if (n >= imPath.length) {

            n = 0;

        }

    }, 3000);

}

/*图片进入上一页*/

function before() {

    n--;

    if (n <=-1) {

            n = imPath.length-1;

        }

    imDom.src = imPath[n];

    for (var i = 0; i < btnDom.length; i++) {

        btnDom[i].style.color = "black";

    }

    btnDom[n].style.color = "red";

}

/*图片进入下一页*/

function next() {

    n++;

    if (n >= imPath.length) {

            n = 0;

        }

    imDom.src = imPath[n];

    for (var i = 0; i < btnDom.length; i++) {

        btnDom[i].style.color = "black";

    }

    btnDom[n].style.color = "red";

}

/*点击数字按钮，跳转到相应图片*/

function xx(a) {

    imDom.src = imPath[a];

}

js原声代码 轮播图的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. js 自适应手机电脑 轮播图

    自己写了一个javascript的可循环轮播图,支持手机滑动,不过代码着实小白,全局变量,函数调用满天飞,研究别的代码规范好的轮播图插件,表示看得懂但是写不出.. HTML: <div id=& ...

  3. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  4. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  5. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  6. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  9. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. 谈谈如何绕过 TinyPNG 对上传图片数量的限制

    前端er, 又称为切图仔,平时经常需要用 PSD 导出 PNG 或 JPG,但是导出来的的图片一般比较大,往往需要用一些其他工具压缩后再发布到生产环境. 以前常用的做法是,使用 image-webpa ...

  2. AcWing 走廊泼水节 题解

    这道题大致题意就是让一棵树任意两点有连边(也就是完全图),但是补完后最小生成树是一开始的那棵树,问最小加的边权之和是多少. 了解题意后,我们可以想到用Kruskal(废话),当每两个集合合并的时候,除 ...

  3. 七.数据分页原理,paginator与page对象

    1.分页: Paginator对象 Page对象 2.Paginator: class Paginator(object_list, per_page, orphans=0, allow_empty_ ...

  4. 基于ASP.NET core的MVC站点开发笔记 0x01

    基于ASP.NET core的MVC站点开发笔记 0x01 我的环境 OS type:mac Software:vscode Dotnet core version:2.0/3.1 dotnet sd ...

  5. css transparent属性_css 透明颜色transparent的使用

    在css中 transparent到底是什么意思呢? transparent 它代表着全透明黑色,即一个类似rgba(0,0,0,0)这样的值. 例如在css属性中定义:background:tran ...

  6. 「树形DP」洛谷P2607 [ZJOI2008]骑士

    P2607 [ZJOI2008]骑士 题面: 题目描述 Z 国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的 ...

  7. 「单调队列优化DP」P2034 选择数字

    「单调队列优化DP」P2034 选择数字 题面描述: 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入格 ...

  8. wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群

    wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群 官方文档使用 kubeadm 创建一个单主集群 环境初始化 建议尽可能初始化环境,命令wsl --unregister Ub ...

  9. selenium 怎么查找定位鼠标移上去显示，移开鼠标就消失的内容

    场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...

  10. Linux 下载工具推荐: Motrix && qbittorrent

    Linux下载介绍 Linux下其实下载工具还是蛮多的, 命令行的wget,curl,aria2,甚至于apt 但是个人日常使用下还是有图形化界面比较方便易用.大多数教程里推荐的Uget,可能是我也不 ...