原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片。多余的话我们就不多说了，我们一个一个开始讲吧。
| 1 原生JS实现图片循环切换 —— 方法一 |
在上栗子之前我们先简单介绍一下所用的一些知识点。首先是——JS中的数组，什么是数组呢？其实数组就是在内存空间中连续存储有序数据的结合，元素在数组中的顺序，成为下标，可以使用下标访问数组的每个元素。我们声明数组有如下方式：
1、使用字面量申明：var arr=[ ];
2、在JS中，同一数组，可以存储各种数据类型，直接将数据存储在数组中
例如：var arr=[1,"chuan",true,{},null,func];
3、使用new关键字申明：var arr=new Array(参数);
参数可以是：
参数省略，表示创建一个空数组；
参数为一个整数，表示申明一个length为指定长度的数组。但是这个length可以随时可变可追加。
参数为逗号分隔的都个数值，表示数组的多个值。
new array(1,2,3)==[1,2,3]
接着就是——setInterval，这个是用来设置定时器，每隔n秒执行一次，接受两个参数：需要执行的function、毫秒数。clearInterval 就是用来清除定时器。
现在我们上栗子啦！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#img{
left: -300px;
position: relative;
top:-50px
}
</style>
</head>
<body>
<div id="div">
<img id=obj src ="img/Shop_Isle_5-300x300.jpg" border =0 />
</div> <script type="text/javascript">
var arr=new Array();
arr[0]="img/Shop_Isle_5-300x300.jpg";
arr[1]="img/Shop_Isle_6-300x300.jpg";
arr[2]="img/Shop_Isle_7-300x300.jpg";
arr[3]="img/Shop_Isle_8-300x300.jpg";
arr[4]="img/Shop_Isle_9-300x300.jpg";
arr[5]="img/Shop_Isle_2-300x300.jpg";
arr[6]="img/Shop_Isle_4-300x300.jpg";
var curIndex=0;
setInterval(function() {
var obj=document.getElementById("obj");
var img=document.getElementById("img");
if(curIndex==arr.length - 1) {
curIndex=0;
}
else {
curIndex +=1;
}
obj.src=arr[curIndex];
console.log(curIndex);
},1000)
</script>
</body>
</html>
| 2 原生JS实现图片循环切换 —— 方法二 |
接着我们说说使用原生JS实现图片循环切换的第二种方法。
首先我们还是先讲讲所使用的到知识——JS中的循环，JS中有很多种循环方式，我们今天主要讲讲JS中的for循环。
1、for循环有三个表达式：
申明循环变量
判断循环条件
更新循环变量
三个表达式之间用分号分隔，三个表达式可以省略，但是两个分号缺一不可。
3、for循环执行特点：先判断，再执行，与while相同。
4、for循环三个表达式都可以有多部分组成；第二部分多个判断条件用&& ||链接，第一三部分用逗号分隔；
讲到循环了，我们顺便说说——break和continue。
1、break：跳出本层循环，继续执行循环后面的语句。
如果有多层嵌套，则只跳出一层。
2、continue：跳过本次循环剩余的代码，继续执行下一次循环。
对于for循环，continue之后执行的语句，是循环变量更新的语句i++
对于while、do-while循环，continue之后执行的语句，是循环条件判断；
因此，使用这两个循环时，必须将continue放到i++之后使用。否则continue跳过i++导致死循环。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script type="text/javascript">
var NowImg=1;//表示当前显示的div
var MaxImg=5;//表示div的个数 setInterval(function(){
for(var i=1;i<=MaxImg;i++){
if(NowImg==i)
document.getElementById("div"+NowImg).style.display='block';//当前显示的div
else
document.getElementById("div"+i).style.display='none';
}
if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示
NowImg=1;
else
NowImg++;//设置下一个显示的图片
},1000)
</script>
</head>
<body>
<div>
<div id="div1" style="display:block;"><img src="img/Shop_Isle_9-300x300.jpg" /></div>
<div id="div2" style="display:none;"><img src="img/Shop_Isle_2-300x300.jpg" /></div>
<div id="div3" style="display:none;"><img src="img/Shop_Isle_4-300x300.jpg" /></div>
<div id="div4" style="display:none;"><img src="img/Shop_Isle_5-300x300.jpg" /></div>
<div id="div5" style="display:none;"><img src="img/Shop_Isle_8-300x300.jpg" /></div>
</div>
<body>
</html>
| 3 监测鼠标滚动切换图片 |
使用JS判断鼠标滚动是向上还是向下滚动。监测鼠标对不同浏览器有不同判断方法。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。当用于向前滚动鼠标滚轮是，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮是，wheelDelta是-120的倍数。判断滚轮向上或向下需要考虑浏览器的兼容性，对于现在的浏览器，包括（IE、Opera、Safari、Firefox、Chrome），其中Firefox 使用detail，其余的几个浏览器使用wheelDelta。两者只在取值上不一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。火狐向下滑动为正，向上为负，与其他的几个浏览器正好相反。
1、判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.wheelDelta <) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
2、判断浏览器Firefox滑轮事件 。
if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail<) { //当滑轮向下滚动时
alert("滑轮向下滚动");
7 }
8 }
3、给页面绑定滑轮滚动事件（firefox）
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
4、滚动滑轮触发scrollFunc方法 （ie 谷歌）
window.onmousewheel = document.onmousewheel = scrollFunc;
接下来讲个实例吧，让大家更加明白鼠标滚动事件的监测。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script type="text/javascript">
var img=1;
function MouseWheel(e){
e=e||window.event;
for(i=1;i<4;i++){
if(i==img){
if(e.wheelDelta){//IE
document.getElementById("img"+i).style.display="block";
}else if(e.detail){//Firefox
document.getElementById("img"+i).style.display="block";
}
}else{
document.getElementById("img"+i).style.display="none";
}
}
if(img==3){
img=1;
}else{
img++;
}
}
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",MouseWheel,false);
}
window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script> </head>
<body>
<img src="img/Shop_Isle_9-300x300.jpg" id="img1">
<img src="img/Shop_Isle_6-300x300.jpg" id="img2" style="display:none;">
<img src="img/Shop_Isle_7-300x300.jpg" id="img3" style="display:none;">
</body>
</html>
编者按
希望今天讲的几个图片循环切换的小方法能对大家做网站有所帮助，增加网站上视觉亮点。也希望大家跟小编一样，继续一步一步的学习，在前端路上越走越远。
原生JS—实现图片循环切换及监测鼠标滚动切换图片的更多相关文章
- wpf图片查看器，支持鼠标滚动缩放拖拽
最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- js实现网页全屏切换（平滑过渡），鼠标滚动切换
实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生 js基础常用的判断和循环
原生 js基础常用的判断和循环 以下部分是个人实践及和搜集的资料: 最常用的if判断语句: if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } 原生js的 ...
随机推荐
- zoj 2136 Longest Ordered Subsequence 最长上升子序列 新思路
Longest Ordered Subsequence Time Limit: 2 Seconds Memory Limit: 65536 KB A numeric sequence of ...
- Java 继承、抽象、接口
一.继承 1. 概述 继承是面向对象的重要特征之一,当多个类中存在相同的属性和行为时,将这些内容抽取到单独一个类中,那多个类中无需再定义这些属性和行为,只需继承那个单独的类即可. 单独的类称为父类或超 ...
- MSSQL 自定义函数详解
自定义函数分为:标量值函数或表值函数 如果 RETURNS 子句指定一种标量数据类型,则函数为标量值函数.可以使用多条 Transact-SQL 语句定义标量值函数. 如果 RETURNS 子句指定 ...
- MySql5.7创建数据库与添加用户、删除用户及授权
MySql安装启动成功后(不会的可以查看上篇MySql5.7安装及配置),首先我们需要创建数据库,然后创建一个用户去操作这个数据库: 一.创建数据库 在MySql命令行中输入: create data ...
- win10 uwp 切换主题
本文主要说如何在UWP切换主题,并且如何制作主题. 一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色.这是微软建议的,一般应用都要包含的颜色. 我们 ...
- Python学习笔记（八）
Python学习笔记(八): 复习回顾 递归函数 内置函数 1. 复习回顾 1. 深浅拷贝 2. 集合 应用: 去重 关系操作:交集,并集,差集,对称差集 操作: 定义 s1 = set('alvin ...
- 深入理解Java中的迭代器
迭代器模式:就是提供一种方法对一个容器对象中的各个元素进行访问,而又不暴露该对象容器的内部细节. 概述 Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比如ArrayList.Li ...
- PHP获取文件扩展名的五种方式
这是我应聘实习时遇到的一道笔试题: 使用五种以上方式获取一个文件的扩展名. 要求:dir/upload.image.jpg,找出 .jpg 或者 jpg , 必须使用PHP自带的处理函数进行处理,方法 ...
- LeetCode 628. Maximum Product of Three Numbers （最大三数乘积）
Given an integer array, find three numbers whose product is maximum and output the maximum product. ...
- LeetCode 169. Majority Element （众数）
Given an array of size n, find the majority element. The majority element is the element that appear ...