js鼠标点击按钮切换图片小程序生命周期(js鼠标经过切换图片)
微信小程序:渲染流程、生命周期和触发顺序
小程序的生命周期分为 应用生命周期 、 页面生命周期
App() 必须在 app.js 中调用,必须调用且 只能调用一次 ,app.js中定义了一些应用的生命周期函数
(1)onLaunch: 初始化小程序时触发,全局只触发一次
(2)onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
(3)onHide: 用户从前台切换到后台隐藏时触发
(4)onError: 小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
后台:点击左上角关闭,或者按了设备 Home 键离开微信,并没有直接销毁,而是进入后台
前台:再次进入微信或再次打开小程序,相当于从后台进入前台。
官方介绍
js文件中定义了一些页面生命周期函数,下面简述下这些生命周期函数的方法作用
(1)onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
(2)onShow:加载完成后、后台切到前台或重新进入页面时触发
(3)onReady:页面首次渲染完成时触发
(4)onHide:从前台切到后台或进入其他页面触发
(5)onUnload:页面卸载时触发
官方介绍
通过console.log验证它们的触发顺序
以上是对生命周期粗略的认识,如有不足请指正~
参考链接
JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..\images/DT2.JPG"这一步是没有作用的,因为img1你还没有定义。
正确的方法是让图片元素的id是img1,然后
document.getElementById('img1').src = "..\images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
div class="DT"
div
img id="img1" src=""
/
/div
/div
div style="text-align:center"
input type="button" id="b1" value=" 放大 " onclick="fd();" /
input type="button" id="b3" value="还原 " onclick="hy();" /
input type="button" id="b2" value=" 缩小 " onclick="sx();" /
/div
function fd() {
document.getElementById('img1').src = ""
}
function sx() {
document.getElementById('img1').src = ""
}
function hy() {
document.getElementById('img1').src = ""
}
js 点击按钮切换
function change(obj){
var divStyle =document.getElementById('id').style.display;
var src=obj.src;
var c=src.lastIndexOf("/")+1;
var s=src.slice(c);
if(divStyle=="block"){
document.getElementById('id').style.display="none";
obj.src=src.replace(s,"隐藏时的图片.jpg");
}
if(divStyle=="none"){
document.getElementById('id').style.display="block";
obj.src=src.replace(s,"显示时的图片.jpg");
}
}
img src="images/resume/显示时的图片.jpg" onclick="change(this)"/
div id="id" style="display:block"你的代码/div
换这个方法试试,适合只有一组需要切换的,动态就需要把div的id动态传值,赋值,其他的代码不需要变,一般情况一对隐藏显示就有一组对应的按钮,所以div的id是可以动态传过来,
img src="images/resume/显示时的图片.jpg" onclick="change(this,'id')"/
div id="id" style="display:block"你的代码/div
img src="images/resume/显示时的图片.jpg" onclick="change(this,'id_1')"/
div id="id_1" style="display:block"你的代码/div
到JS里接受这个参数就行了function change(obj,id){}
js实现左右切换轮播图思路
我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效,但使用 CSS 做出来的轮播图只有左右切换,渐变切换和简单的点击切换。局限性较大,观看效果也不佳。但当我们接触 js 之后,你就发现使用js来实现轮播图后,在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说,咱们一起看看如何使用js来实现轮播效果。
(本文以阴阳师中“平安世界”模块的轮播图为例)
这个轮播图,我们通过两大模块构成;左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前,先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块:
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后,我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码,以此来达到循环切换图片的效果。在切换图片时,我们可以使用排他思想。当点击按钮切换下一张图片的时候,我们可以先遍历所有的图片,把所有的图片移动到两边,然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动,可能还会出现其他问题。
本次现讲一下左右切换的思路。