纯HTML+JS实现轮播
<!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实现轮播的更多相关文章
- 纯原生JS大图轮播
CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 使用纯css3实现图片轮播
<!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图,广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js原生轮播
js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- 『王霸之路』从0.1到2.0一文看尽TensorFlow奋斗史
0 序篇 2015年11月,Google正式发布了Tensorflow的白皮书并开源TensorFlow 0.1 版本. 2017年02月,Tensorflow正式发布了1.0.0版本,同时也标志 ...
- Python基础(十八)
今日主要内容 包 一.包 (一)什么是包 只要是含有__init__.py文件的文件夹就是一个包 包的本质其实就是一个文件夹,利用包将不同功能的模块组织起来,以此来提高程序的结构性和可维护性 包是用来 ...
- ThinkPHP5通过composer安装Workerman安装失败问题(避坑指南)
$ composer require topthink/think-workerUsing version ^2.0 for topthink/think-worker./composer.json ...
- UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 357: illegal multibyte sequence 错误解决方法(已解决)
今天在搭建数据驱动测试框架的时候遇到这个错误: 好在我英语水平还不错(也就六级水平吧),根据英文提示说是多字节数据顺序是非法的 顺着错误往上找发现 File "C:\Users\Mr雷的电脑 ...
- Spring Boot WebFlux 增删改查完整实战 demo
03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello .这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD ...
- 视频转换器 Wondershare Video Converter Ultimate v11.5.1 中文便携版
Wondershare Video Converter Ultimate 是万兴公司出品的一款多功能音视频转换.DVD 刻录软件.视频下载软件.有了它,您可以随时随地观看.下载.编辑.转换.刻录视频, ...
- Xadmin查询
目录 深浅coopy运用 ModelForm的补充 提取模型当中相关属性 getattr和get_field的区别 __ str__,get_field,getattr初识 str ,当用getatt ...
- SQL SERVER数据库多having 用法
举实例:查询大于500的数据,并按时间进行汇总排序 select CONVERT(VARCHAR(10),DGH,23),COUNT(*) from yxhis2017..VTBMZGHMX201 ...
- 设计模式常见面试知识点总结(Java版)
设计模式 这篇总结主要是基于我设计模式系列的文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以到我的cdsn博客上查看: https:// ...
- Django高级实战 开发企业级问答网站 ✌✌
Django高级实战 开发企业级问答网站 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 从实际需求分析开始,实现当今主流知识问答应用的功能,包括动态.文章.问 ...