一个最简单的jQuery焦点图插件实现

蓝飞 蓝飞 | 时间:2013-03-10, Sun | 10,748 views
 

有一个同学需要在网页里用到简单的焦点图效果,在网上找了许多jQuery插件都不甚满意,有一些效果虽然不错,但是根本用不到那么多功能,大材小用不说,还会加大代码量,降低网页前端性能,于是花了十分钟写了一个最最简单的jQuery焦点图插件,麻雀虽小,五脏俱全,可定制宽高,切换延迟。代码如下:

HTML部分,自然是一个非常简单的列表结构:

<ul id="slider" class="slider">
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider1.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider2.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider3.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider4.jpg" /></a></li>
	<li><a target="_blank" href="javascript:void(0);"><img src="images/slider5.jpg" /></a></li>
</ul>

CSS部分,简单地定义一下样式:

.slider{
	margin: 0 auto;
	padding: 0;
	width: 600px;
	height: 400px;
	list-style: none;
	overflow: hidden;
	position: relative;
}

.slider li{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.slider img{
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	text-align: center;
}

接下来是精髓部分,JavaScript:

(function($){
	var slider = function(args){
		var index = 0;
		var that = this;
		var config = {
			width : 600,
			height : 400,
			delay : 3000,
		};
		config = $.extend({}, config, args);
		$(this).width(config.width).height(config.height).children().hide().eq(0).show();
		setInterval(function(){
			index = (index + 1) % $(that).children('li').length;
			$(that).children().stop(true, false).fadeOut().eq(index).stop(true, false).fadeIn();
		}, config.delay);
	};
	$.prototype.slider = slider;
})(jQuery);

调用方式如下:

$('#slider').slider({
	width : 720,
	height : 360,
	delay : 5000
});

当然,如果直接使用默认参数的话也可以直接这样调用:

$('#slider').slider();

这只是一个最简单的Slider例子,但却涵盖了一些比较好的JavaScript编写思路,还有闭包等,欢迎在此之上进行二次开发,也欢迎与我交流技术上的问题~

Demo下载地址:

http://vdisk.weibo.com/s/tbzlb

如需转载请注明出处:蓝飞技术部落格

5 条评论 »

  1. Comfish Comfish

    这个刚好用上,偷偷下载啦。

    1. 复杂的赶脚

      1. 其实蛮简单的,你可以自己看看思路~

  2. 刚开始学习javascript,拷贝下了研究下。

    1. @王雪松的空间
      加油。