纯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张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- php常用函数（第一版）
1.array_slice 作用:数组分页函数 案例:$output = array_slice ( $input , - 2 , 1 ); 2.array_column 作用:数组根据值取出一 ...
- 实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
- NAT网络下tcp_tw_recycle参数引起的故障
记录一次阿里云服务器故障排查思路 公司网络是nat 环境 问题: 同一个服务有两台服务器 172.19.19.252 172.19.19.187 两台服务器 要连node5 发现172.19.19.2 ...
- 防DOS攻击-网络连接法
#!/bin/bash netstat -antup | grep SYN_RECV | awk '{print $5}' |awk -F: '{print $1}'|sort|uniq -c > ...
- RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的？
目录 RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 前言 项目结构 rocketmq-client 模块 DefaultMQProducerTest Roc ...
- IDEA 学习笔记之 Python项目开发
Python项目开发: 下载Python: https://www.python.org/downloads/release/python-363/ 安装Python: 配置环境变量(path): C ...
- 2.css3表示颜色的几种方式
1.css3中表示颜色的几种方式: ⑴颜色名称.十六进制.RGB方式: ⑵RGBA方式:新增了alpha参数,介于0.0(完全透明)到1.0(完全不透明)之间: ⑶HSL方式:分别表示色调.饱和度.亮 ...
- LitePal的存储操作
传统的存储数据方式 其实最传统的存储数据方式肯定是通过SQL语句拼接字符串来进行存储的,不过这种方式有点过于“传统”了,今天我们在这里就不讨论这种情况.实际上,Android专门提供了一种用于存储 ...
- python编程基础之十四
列表的增加元素 l1 = [10, 20, 30] l1.append(40) # 末尾追加一个值为40的元素 l1.extend([50, 60]) # 末尾追加一系列元素,extend + 可 ...
- JVM本地方法栈及native方法
看到虚拟机栈和本地方法栈的区别的时候有点疑惑,因为本地方法栈为虚拟机的Native方法服务.以下转载一篇关于native方法的介绍: http://blog.csdn.net/wike163/arti ...