<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>轮播原理图</title>
</head>
<body>
<div>

<!--添加两个按钮和默认出现的图-->
<button onclick="prev()"> 上一个 </button>
<img id="slider" src="data:image/1.jpg" />
<button onclick="next()"> 下一个 </button>
</div>

<!--JS代码-->
<script>

<!--定义一个数组放入轮播的图片-->
var images = [
"image/1.jpg",
"image/2.jpg",
"image/3.jpg"
];

<!--定义一个开始数0>
var num = 0;

<!下一个按钮点击事件-->

function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {　　　　<!--如果出现num大于等于数组长度则返回0（这里注意数组长度是从 1 计算，而数组是从 0 开始计算）-->
num = 0;
}
slider.src = images[num];　　　　<!--更改src属性-->
}

<!--上一个按钮点击事件-->

function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {　　　　　　　　　　<!--如果出现num小于0，则返回数组长度-1（这里注意数组长度是从 1 计算，而数组是从 0 开始计算）-->
num = images.length-1;
}
slider.src = images[num];　　　　<!--更改src属性-->
}
</script>
</body>
</html>

纯HTML+JS实现轮播的更多相关文章

  1. 纯原生JS大图轮播

    CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  4. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  5. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  7. js原生轮播

    js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...

  8. js实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. 『王霸之路』从0.1到2.0一文看尽TensorFlow奋斗史

    ​ 0 序篇 2015年11月,Google正式发布了Tensorflow的白皮书并开源TensorFlow 0.1 版本. 2017年02月,Tensorflow正式发布了1.0.0版本,同时也标志 ...

  2. Python基础（十八）

    今日主要内容 包 一.包 (一)什么是包 只要是含有__init__.py文件的文件夹就是一个包 包的本质其实就是一个文件夹,利用包将不同功能的模块组织起来,以此来提高程序的结构性和可维护性 包是用来 ...

  3. ThinkPHP5通过composer安装Workerman安装失败问题（避坑指南）

    $ composer require topthink/think-workerUsing version ^2.0 for topthink/think-worker./composer.json ...

  4. UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 357: illegal multibyte sequence 错误解决方法（已解决）

    今天在搭建数据驱动测试框架的时候遇到这个错误: 好在我英语水平还不错(也就六级水平吧),根据英文提示说是多字节数据顺序是非法的 顺着错误往上找发现 File "C:\Users\Mr雷的电脑 ...

  5. Spring Boot WebFlux 增删改查完整实战 demo

    03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello .这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD ...

  6. 视频转换器 Wondershare Video Converter Ultimate v11.5.1 中文便携版

    Wondershare Video Converter Ultimate 是万兴公司出品的一款多功能音视频转换.DVD 刻录软件.视频下载软件.有了它,您可以随时随地观看.下载.编辑.转换.刻录视频, ...

  7. Xadmin查询

    目录 深浅coopy运用 ModelForm的补充 提取模型当中相关属性 getattr和get_field的区别 __ str__,get_field,getattr初识 str ,当用getatt ...

  8. SQL SERVER数据库多having 用法

    举实例:查询大于500的数据,并按时间进行汇总排序 select  CONVERT(VARCHAR(10),DGH,23),COUNT(*) from  yxhis2017..VTBMZGHMX201 ...

  9. 设计模式常见面试知识点总结（Java版）

    设计模式 这篇总结主要是基于我设计模式系列的文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以到我的cdsn博客上查看: https:// ...

  10. Django高级实战 开发企业级问答网站 ✌✌

    Django高级实战 开发企业级问答网站 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 从实际需求分析开始,实现当今主流知识问答应用的功能,包括动态.文章.问 ...