原生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';//制空所有图片的stylefor(var i=0;i<labels.length;i++){labels[i].className=''; }this.className = 'active'}//鼠标离开时labels[i].οnmοuseοut=function(){//得到计数器文本下标,返回值是string类型n=this.innerText*1;//重新开始计时器t=setTimeout(GaryShowPic,1000);}}function GaryShowPic(){n++;if(n>6){n=1;}//制空所有图片的stylefor(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;}//制空所有图片的stylefor(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';//制空所有图片的stylefor(var i=0;i<labels.length;i++){labels[i].className=''; }//将当前标签显示为红色this.className = 'active'}鼠标离开下标时，重新开始计时器
labels[i].οnmοuseοut=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';//制空所有图片的stylefor(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;}//制空所有图片的stylefor(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"
转载于:https://www.cnblogs.com/1138720556Gary/p/9743344.html
原生Js_使用setInterval() 方法实现图片轮播功能相关推荐
- java postdelayed_Android开发使用Handler的PostDelayed方法实现图片轮播功能
本文实例讲述了Android开发使用Handler的PostDelayed方法实现图片轮播功能.分享给大家供大家参考,具体如下: 第一步:创建MainActivity类 public class Ba ...
- android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
- html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html.js和css共同实现1.html文件 <!DOCTYPE html> <html><head><meta chars ...
- unity实现图片轮播效果_Unity 制作图片轮播功能
功能:自动播放移动 首尾相接 鼠标移到图片上 时 移动停止并 该图片变大 鼠标离开图片恢复原形 轮播效果继续 效果如下 界面布局 大体是这个样子 scrollView就是一个底板带Image组件 ...
- Unity实现图片轮播功能
Unity实现图片无限循环轮播(横and竖) 先来看看效果 横 实现 介绍:只可以左右按键控制图片的切换,可无限扩展图片数量 思路:首尾相连.尾图片与首图片互换位置以及动画效果 主要代码: RectT ...
- Unity 制作图片轮播功能
功能:自动播放移动 首尾相接 鼠标移到图片上 时 移动停止并 该图片变大 鼠标离开图片恢复原形 轮播效果继续 效果如下 界面布局 大体是这个样子 scrollView就是一个底板带Image组件 ...
- html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
- 电子商店——图片轮播
电子商店的图片轮播功能,有以下特点 1. 高性能 2. 美观大方 3. 兼容IE 6.IE 8+和Firefox 3+等浏览器 4. 总体积要小(除图片外)3k 5. js简单易懂(40行) 首先让我 ...
- Android使用viewpager实现图片轮播效果
自定义View实现图片轮播,实现了图片自动轮播,手动滑动,轮播标题,以及点击事件. 里面有很多注释 一.文件布局 二.代码 ImageBannerViewGroup类 /*** Created by ...
最新文章
- abap程序（成本分析报表）
- C++ 对引用的理解5
- html自动加https,http自动跳转https的配置方法
- hdu 5748(LIS) Bellovin
- MINIGUI交叉编译【转】
- mybatis 3的TypeHandler深入解析（及null值的处理）
- Java应用服务器对比：TomcatJettyGlassFishWildFly
- c语言宠物管理系统,请用C语言编出一个简单的宠物管理系统。
- [转]Cocos2d-x下Lua调用自定义C++类和函数的最佳实践
- 线性回归 西瓜数据集 Python--sklearn
- 班级校园网页设计作业 静态HTML我的班级网页 DW班级网站模板 大学生简单班级网页作品代码 我的大学网页制作 学生班级网页设计作业
- 基于对称加密的密钥分配和Kerberos认证
- C++ 炼气期之基本结构语法中的底层逻辑
- 网页实现excel下载
- OCJP(1Z0-851) 模拟题分析（三）
- 配置 Visual Studio 2019以进行 iOS 开发
- 安装画图工具kolourpaint
- 论文笔记：基于深度学习的遥感影像变化检测综述
- K折交叉验证-python
- DVWA通关--SQL注入(SQL Injection)