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. git和github入门指南（2.1）

    2.git常用命令 2.1.git的三个区 1.工作区 工作区就是你项目所在目录,这个目录是可以非常直观的看到的,编写代码主要在这个目录进行,例如: 2.暂存区 暂存区从字面上去理解就是用来暂时保存项 ...

  2. 写出Python中列表、元祖、字典、字符串的至少5种以上的方法

    1.列表 常用方法 作用 参数 append(data) 在尾部添加数据 data-加入到列表中的数据 insert(idx,data) 在指定位置添加数据 idx-索引    data-数据 ext ...

  3. 读CSAPP第二章的收获

    一:一道很有意思的位运算题目:你只有两种操作 bis(x, y): 在y为1的每个位置上,将x的对应的位设为1bic(x, y): 在y为1的每个位置上,将x的对应的位设为0 简单的化简一下bis(x ...

  4. WPF手机号码归属批量查询并导出到Excel

    工具下载地址:https://download.csdn.net/download/m0_37137902/12589801 1WPF页面xaml代码 <Window x:Class=" ...

  5. python 并发专题（一）：并发基础相关概念，术语等

    一.线程 1.概念 线程是程序执行流的最小执行单位,是行程中的实际运作单位. 进程是一个动态的过程,是一个活动的实体.简单来说,一个应用程序的运行就可以被看做是一个进程,而线程,是运行中的实际的任务执 ...

  6. java 基本语法（十一） 数组（四）数组的常见算法

    1.数组的创建与元素赋值: 杨辉三角(二维数组).回形数(二维数组).6个数,1-30之间随机生成且不重复. 杨辉三角 public class YHSJ { public static void m ...

  7. python 生成器（二）：生成器基础（二）惰性实现

    简介 设计 Iterator 接口时考虑到了惰性:next(my_iterator) 一次生成一个元素.懒惰的反义词是急迫,其实,惰性求值(lazy evaluation)和及早求值(eager ev ...

  8. java大数据最全课程学习笔记(1)--Hadoop简介和安装及伪分布式

    Hadoop简介和安装及伪分布式 大数据概念 大数据概论 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉,管理和处理的数据集合,是需要新处理模式才能具有更强的决策力,洞察发 ...

  9. Cordova总是弹出Connection to server was Unsuccessful

    开发环境:Cordova版本:6.x 安卓版本:6.0 解决方案一: 在config.xml中添加以下内容: <preference name="LoadUrlTimeoutValue ...

  10. oracle数据库查询分组之外的数据方法

    select * from (select t.*,row_number() over(partition by 分组字段 order by rownum) rn from 表名 t where 条件 ...