原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播</title>
<style>
#swaper{
width: 520px;
margin: 0 auto;
}
#number{
position: relative;
top: -30px;
right: -320px;
}
label{
width: 10px;
height: 10px;
background-color: yellow;
margin: 2px; }
.active{
width: 10px;
height: 10px;
border: 1px solid black;
background-color: red;
}
</style>
<script>
//此处编写代码，实现图片轮播功能 </script>
</head>
<body>
<div id="swaper">
<img src="img/pic01.jpg" width="512px" id="img">
<div id="number">
<label id="l1" class="active"> 1 </label>
<label id="l2"> 2 </label>
<label id="l3"> 3 </label>
<label id="l4"> 4 </label>
<label id="l5"> 5 </label>
<label id="l6"> 6 </label>
</div>
</div>
</body>
</html>
(第4和第5张图片是一样的，最下方有看鼠标点击时控制台输出的信息)
<script>
//此处编写代码，实现图片轮播功能
var n =0;
var t =0;
var oDiv = document.getElementById('number');
var labels = document.getElementsByTagName('label');
window.onload = function(){
//加载页面时开始触发图片轮播
t=setTimeout(GaryShowPic,1000);
for(var i = 0;i<labels.length;i++){
//鼠标放置到下标上时
labels[i].onmouseover = function(){
//停止计时器
clearTimeout(t);
var b = this.innerText*1;
img.src = 'img/pic0'+b+'.jpg';
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
this.className = 'active'
}
//鼠标离开时
labels[i].onmouseout=function(){
//得到计数器文本下标,返回值是string类型
n=this.innerText*1;
//重新开始计时器
t=setTimeout(GaryShowPic,1000);
}
} function GaryShowPic(){
n++;
if(n>6){n=1;}
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
labels[n-1].className='active';
document.getElementById('img').src='img/pic0'+n+'.jpg';
t=setTimeout(GaryShowPic,1000);
}
}
</script>
Gary.Script
实现过程
Window setInterval() 方法 传送门
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
(如果只想执行一次可以使用 setTimeout() 方法)
clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。
(要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量)
t作为setInterval() 返回的 ID 值并且要使用clearTimeout()，开全局变量
//作为轮播图片下标签
var n =0;
//由 setInterval() 返回的 ID 值
var t =0;
播放图片方法
function GaryShowPic(){
n++;
if(n>6){n=1;}
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
labels[n-1].className='active';
document.getElementById('img').src='img/pic0'+n+'.jpg';
t=setTimeout(GaryShowPic,1000);
}
鼠标放置到下标上时
labels[i].onmouseover = function(){
//停止计时器
clearTimeout(t);
//显示当前标签表示的图片
var b = this.innerText*1;
img.src = 'img/pic0'+b+'.jpg';
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
//将当前标签显示为红色
this.className = 'active'
}
鼠标离开下标时，重新开始计时器
labels[i].onmouseout=function(){
//得到计数器文本下标,返回值是string类型
n=this.innerText*1;
//重新开始计时器
t=setTimeout(GaryShowPic,1000);
}
JavaScript中innerText和innerHTML的区别 传送门
innerText返回或者设置DOM元素的文本
innerHTML 返回或者设置DOM元素的子元素
返回元素上： 忽略和不忽略Html标签的区别
innerHTML:
从对象的起始位置到终止位置的全部内容,包括Html标签
innerText:
从起始位置到终止位置的内容, 但它去除Html标签
=================================分割线
使用console.log()在控制台中查看输出信息
在鼠标触碰事件中添加 console.log("鼠标触碰到的下标值为"+b) 查看鼠标触碰到的数值
//鼠标触碰到标签上时
labels[i].onmouseover = function(){
//停止计时器
clearTimeout(t);
//显示当前标签表示的图片
var b = this.innerText*1;
console.log("鼠标触碰到的下标值为"+b);
img.src = 'img/pic0'+b+'.jpg';
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
//将当前标签显示为红色
this.className = 'active'
}
在GaryShowPic()中添加 console.log(labels[n-1]) 查看所显示标签的信息
function GaryShowPic(){
n++;
if(n>6){n=1;}
//制空所有图片的style
for(var i=0;i<labels.length;i++){
labels[i].className='';
}
labels[n-1].className='active';
console.log(labels[n-1]);
document.getElementById('img').src='img/pic0'+n+'.jpg';
t=setTimeout(GaryShowPic,1000);
}
console.log("鼠标触碰到的下标值为"+b)调试台输出的值是我们想要的
console.log(labels[n-1])输出来的值就是下面body中的值
<div id="number">
<label id="l1" class="active"> 1 </label>
<label id="l2"> 2 </label>
<label id="l3"> 3 </label>
<label id="l4"> 4 </label>
<label id="l5"> 5 </label>
<label id="l6"> 6 </label>
</div>
可以看到，实现的轮播图改变的只是所指向的label id 标签值的class="active"
原生Js_使用setInterval() 方法实现图片轮播功能的更多相关文章
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 基于bootstrap的图片轮播功能
插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...
- 使用JS实现图片轮播（前后首尾相接）
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- javaScript实现图片滚动及一个普通图片轮播的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- onethink插件二（首页图片轮播）
2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...
- 原生Js_简易图片轮播模板
功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...
- 基于面向对象的图片轮播（js原生代码）
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- c++学习笔记之类和对象（二、构造函数和析构函数）
1.构造函数(Constructor):在C++中,有一种特殊的成员函数,它的名字和类名相同,没有返回值,不需要用户显式调用(用户也不能调用),而是在创建对象时自动执行. 这种特殊的成员函数就是构造函 ...
- 修改公司VS_UCOS工程BUG调试过程说明
说明:公司里的工程中,使用VS_UCOS来调试应用程序.业务逻辑.方法是嵌入式和VS分别建一个工程,把底层驱动部分分别添加各自需要的源文件,头文件使用同一个.也就是嵌入式的驱动函数名和参数和VS的函数 ...
- Hadoop单节点启动分布式伪集群
emm~ 写这篇博客只是手痒,因为开发环境用单节点就够了,生产环境肯定是真实集群,所以这个伪分布式纯属娱乐而已. 配置HDFS1. 安装好一台hadoop,可以参考这篇博客.2. 在hadoop目录下 ...
- 分布式的几件小事（四）dubbo负载均衡策略和集群容错策略
1.dubbo负载均衡策略 ①random loadbalance 策略 默认情况下,dubbo是random loadbalance 随机调用实现负载均衡,可以对provider不同实例设置不同的权 ...
- LVS、Nginx及HAProxy
本文转载自 linkedkeeper.com 当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群, ...
- yarn的安装步骤
yarn依赖npm,是npm中的一个包 https://www.npmjs.com/package/yarn 1.安装 npm i -g -yarn 2.测试是否安装成功 yarn --vresion ...
- this全面解析<转>
先搞明白一个很重要的概念 —— this的值是在执行的时候才能确认,定义的时候不能确认! 为什么呢 —— 因为this是执行上下文环境的一部分,而执行上下文需要在代码执行之前确定,而不是定义的时候. ...
- C# 封装返回类
using System; using System.Collections.Generic; using System.Runtime.CompilerServices; using System. ...
- linux上如何安装git
安装依赖软件 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc yum instal ...
- 解压速度更快, Zstandard 1.4.1 发布
zstd 1.4.1 发布了,zstd 又叫 Zstandard,它是一种快速无损压缩算法,主要应用于 zlib 级别的实时压缩场景,并且具有更好的压缩比.zstd 还可以以压缩速度为代价提供更强的压 ...