JavaScript练习--[使用js语言实现网页切换图片的效果]

图片切换效果需求;

(1)在网页中设计图片的切换效果;打开网页时,只能看到图片;

(2)当鼠标移到图片上时,两个按钮就会显示出来;

(3)当鼠标点击上;就会切换到上一张图片;点击下;就会切换到下一张图片.

(注:本练习使用的图片大小尺寸一致;均为540X960 大小)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 设置修饰属性 --><style type="text/css">/* 首先清除浏览器默认样式 */*{margin: 0px;padding: 0px;}img{display: block;/* 设置图片标签变为块标签 */}#div01{width: 960px;/* 设置宽度 */height: 540px;/* 设置高度 */margin: auto;/* 设置外边距为自动,居中 */position: relative;/* 开启相对定位 */}/* 按钮的属性和定位 */ #btn01,#btn02{width: 25px;width: 25px;background-color: aqua;opacity:0 ;/*透明度为0;隐藏按钮*/position: absolute;/* 开启绝对定位 */top: 250px; /* 距离父级标签顶部250个像素 */}#btn02{right: 0px;    /* 右边的按钮紧贴图片右边 */}  </style><script type="text/javascript">//设置鼠标移入图片操作函数;function imgoper1(){//获取两个按钮的对象;var imgoper01=document.getElementById("btn01");var imgoper02=document.getElementById("btn02");//设置透明度为1;即绝对显示;imgoper01.style.opacity=1.0;imgoper02.style.opacity=1.0;}//设置鼠标移出图片操作函数;function imgoper2(){//获取两个按钮的对象;var imgoper01=document.getElementById("btn01");var imgoper02=document.getElementById("btn02");//设置透明度为0;即隐藏按钮;imgoper01.style.opacity=0;imgoper02.style.opacity=0;}//将图片地址存到一个数组中;var imgarray=["./img/fortnite01.jpg","./img/fortnite02.jpg","./img/fortnite03.jpg","./img/fortnite04.jpg","./img/fortnite05.jpg","./img/fortnite06.jpg","./img/fortnite07.jpg","./img/fortnite08.jpg","./img/fortnite09.jpg"];//定义图片数组的索引值;var index=0;//设置按钮操作函数;//获取图片的对象;var imgobj;//按钮1;function button01(){imgobj=document.getElementById("imgworld");index--;//每当切换到第一张图片时,点击就会切换到最后一张图片;if(index<0){index=imgarray.length-1;}imgobj.src=imgarray[index];       }//按钮2;function button2(){imgobj=document.getElementById("imgworld");index++;//当切换到最后一张图片时;点击就会切到第一张图片;if(index>imgarray.length-1){index=0;    }imgobj.src=imgarray[index];}</script></head><body><div id="div01"><!-- 第一张图片;鼠标移入后就会显示两个按钮;移出后就会隐藏 --><img id="imgworld"  src="./img/fortnite01.jpg" onmouseover="imgoper1()" onmouseout="imgoper2()"/><!-- 两个按钮分别放在两个块级标签内;按钮1切换上一张图片;按钮2切换下一张--><div id="btn_left"><input  type="button" id="btn01"  onmouseover="imgoper1()" onclick="button01()" value="上<<<"/></div><div id="btn_right"><input type="button" id="btn02"   onmouseover="imgoper1()" onclick="button2()" value="下>>>"/></div></div></body>
</html>

效果:

优化

实现自动切换图片效果,且鼠标放置在图片上时,停止自动切换;同时图片两边出现按钮;点击即可进行执行手动切换图片效果

代码部分:

<html><head><meta charset="utf-8"><title></title><!-- 设置修饰属性 --><style type="text/css">/* 首先清除浏览器默认样式 */*{margin: 0px;padding: 0px;}img{display: block;/* 设置图片标签变为块标签 */}#div01{width: 960px;/* 设置宽度 */height: 540px;/* 设置高度 */margin: auto;/* 设置外边距为自动,居中 */position: relative;/* 开启相对定位 */}/* 按钮的属性和定位 */ #btn01,#btn02{width: 25px;width: 25px;background-color: aqua;opacity:0 ;position: absolute;/* 开启绝对定位 */top: 250px; /* 距离父级标签顶部250个像素 */}#btn02{right: 0px;   /* 右边的按钮紧贴右边 */}    </style><script type="text/javascript">//将图片地址存到一个数组中;var imgarray=["./img/fortnite01.jpg","./img/fortnite02.jpg","./img/fortnite03.jpg","./img/fortnite04.jpg","./img/fortnite05.jpg","./img/fortnite06.jpg","./img/fortnite07.jpg","./img/fortnite08.jpg","./img/fortnite09.jpg"];//图片数组的索引值;var index=0;//设置按钮操作函数;//获取图片的对象;var imgobj;//按钮1;上一张;function button01(){imgobj=document.getElementById("imgworld");index--;//每当切换到第一张图片时,点击就会切换到最后一张图片;if(index<0){index=imgarray.length-1;}imgobj.src=imgarray[index];     }//按钮2;下一张;function button2(){imgobj=document.getElementById("imgworld");index++;//当切换到最后一张图片时;点击就会切到第一张图片;if(index>imgarray.length-1){index=0;    }imgobj.src=imgarray[index];}//自动切换图片效果;var r;function auto(){//设置计时器,6秒执行一次;r=setInterval("button2()",6000);}//设置鼠标图片透明度显示函数;function imgoper(transparency){document.getElementById("btn01").style.opacity=transparency;document.getElementById("btn02").style.opacity=transparency;//当按钮透明度为1时;(即按钮完全显示时,停止计时器)if(transparency==1.0){clearInterval(r);}//当按钮隐藏时,重新启动计时器;else{auto();}}</script></head><!--在加载出页面时就运行自动切换图片--><body onload="auto()"><div id="div01"><!-- 第一张图片;鼠标移入后就会显示两个按钮;移出后就会隐藏 --><img id="imgworld"  src="./img/fortnite01.jpg" onmouseover="imgoper(1.0)" onmouseout="imgoper(0)"/><!-- 两个按钮分别放在两个块级标签内;按钮1切换上一张图片;按钮2切换下一张--><div id="btn_left"><input  type="button" id="btn01"  onmouseover="imgoper(1.0)"  onmouseout="imgoper(0)"   onclick="button01()" value="上<<<"/></div><div id="btn_right"><input type="button" id="btn02"  onmouseover="imgoper(1.0)"  onmouseout="imgoper(0)"  onclick="button2()"  value="下>>>"/></div></div></body>
</html>

实现效果

使用到的图片:

JavaScript练习--[使用js语言实现网页切换图片的效果]相关推荐

html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）...
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
js面向对象模拟京东商城图片放大效果
js面向对象模拟京东商城图片放大效果 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力.本文简单介绍一下使用JavaScript面向对象思想模拟京东商城鼠标悬浮 ...
Unity Shader 之实现简单的动态过场切换图片的效果
Unity Shader 之实现简单的动态过场切换图片的效果目录 Unity Shader 之实现简单的动态过场切换图片的效果一.简单介绍
【中英双语】使用JavaScript 及Three.js开发3D网页游戏
此教程共2.0小时,中英双语字幕,画质清晰无水印,源码附件全课程英文名:3D Web Game Development with JavaScript and Three.js 下载地址百度网盘地 ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
js中点击按钮切换图片
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title ...

JavaScript练习--[使用js语言实现网页切换图片的效果]

优化

JavaScript练习--[使用js语言实现网页切换图片的效果]相关推荐

最新文章

热门文章