纯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张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- YiShaAdmin，基于.NET Core Web开源的后台快速开发框架
YiShaAdmin YiShaAdmin 基于.NET Core Web开发,借鉴了很多开源项目的优点,让你开发Web管理系统和移动端Api更简单,所以我也把她开源了. 她可以用于所有的Web应用程 ...
- Forest plot（森林图） | Cox生存分析可视化
本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/2W1W-8JKTM4S4nml3VF51w 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...
- ELK 学习笔记之 elasticsearch Mget操作
Mget操作: 查询多个文档: curl -XGET 'http://192.168.1.151:9200/_mget' -d '{"docs": [{"_index&q ...
- bugku 一个普通的压缩包
压缩包打不开,用winhex打开压缩包,发现头文件是zip的,将后缀改为zip,成功解压. 打开发现还是个压缩包,而且打不开,提示secret.png损坏,使用winhex打开. 将a8 3c 7a ...
- c语言中double类型数据的输入和输出
double a;scanf("%f",&a); //应用scanf("%lf",&a);执行上面语句时,发现double类型的输入不能使用 ...
- Windows系统调用中的系统服务表描述符
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html Windows系统调用中的系统服务表描述符 在前面,我们将解过 ...
- 某PHP发卡系统SQL注入
源码出自:https://www.0766city.com/yuanma/11217.html 安装好是这样的 审计 发现一处疑似注入的文件 地址:/other/submit.php 看到这个有个带入 ...
- C++ 利用template给函数中的变量赋初值
#include <iostream> template<int base> void echo(int add) { int sum=add+base; std::cout& ...
- CSS中各种布局的背后(*FC)
CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...
- [BZOJ5280] [Usaco2018 Open]Milking Order
Description Farmer John的N头奶牛(1≤N≤105),仍然编号为1…N,正好闲得发慌.因此,她们发展了一个与Farmer John每 天早上为她们挤牛奶的时候的排队顺序相关的复杂 ...