切图中js立即执行函数的引用

最新推荐文章于 2025-04-02 23:16:37 发布

原创最新推荐文章于 2025-04-02 23:16:37 发布 · 319 阅读

CC 4.0 BY-SA版权

本文介绍了一种轮播图实现方式，通过设置定时器自动切换图片，并使用鼠标悬停事件来改变当前显示的图片及对应的文字样式。文章详细解释了如何利用闭包来确保每个事件处理函数能够正确引用其对应的图片索引。

如图所示，这是个轮播图，但我没有采用滑的方式显示，我设置了一个定时器，每隔3秒钟切换一次图片，在图片的右下角，有一个说明框，我给说明框里的li标签加了mouseover事件，当鼠标移入时，显示对应图片，并相应文字样式发生变化，为了实现这个功能，我利用立即执行函数，每执行一次都创造一个私有空间，使得每个qie函数都有自己自己相对应的i值，这里要注意qie函数的申明要在立即执行函数里面，这样在每次执行立即执行函数时遇到qie函数时，创建的scope都是在当前立即执行函数的scope之上的，所以在执行qie函数时，l利用scope就可以访问到相对应的i，这种现象可以叫做闭包

(function(i){
		//qie函数定义要放在立即执行函数里面才能起作用
		function qie(){
			//console.log(i);
			for(var j = 0; j < image_li_len; j ++){
				image_li[j].style.display = 'none';
				image_li[j].style.display = 'none';
				explain_li[j].style.color = '#aeacac';
				explain_li[j].style.height = '50px';
				explain_li[j].style.fontSize = '12px';
				explain_li[j].style.lineHeight = '50px';
			}
			image_li[i].style.display = 'block';
			explain_li[i].style.color = '#fff';
			explain_li[i].style.height = '70px';
			explain_li[i].style.fontSize = '13px';
			image_li[i].style.display = 'block';
		}
		addEvent(explain_li[i], 'mouseover', qie);
	}(i));