【推荐】同样的焦点图不同的写法

<span style="font-size:14px;"><strong>写法一、</strong></span>
<script type="text/javascript">
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);

//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});

//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});

//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});

</script>

写法2：

jQuery.focus = function(slid) {
var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）
var len = $(slid).find("ul li").length; //获取焦点图个数
var index = 0;
var picTimer;

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
var ii = i+1;
btn += "<span>"+ii+"</span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$(slid).append(btn);
$(slid).find("div.btnBg").css("opacity",0.5);

//为小按钮添加鼠标滑入事件，以显示相应的内容
$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {
index = $(slid+" .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//上一页、下一页按钮透明度处理
$(slid+" .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});

//上一页按钮
$(slid+" .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});

//下一页按钮
$(slid+" .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$(slid+" ul").css("width",sWidth * (len));

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$(slid).hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$(slid+" ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
$(slid+" .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}

};

用这两个例子并不是说这两个代码写的很好或者很复杂，而是简单说明下jquery对象的简单封装方法

1、直接使用

没什么好说的，直接

jQuery(function(){
code
})

2、最简单的封装，可以传递对象进去

jQuery(function(){
jQuery.classname=function(obj){
jQuery(obj);
jQuery(obj+" ul");
jQuery(obj).find("ul").eq(0)
}
})

使用方法jQuery.classname("#id")

简单封装有一个好处，可以一个页面使用多个相互不干扰的javascript代码

3、稍复杂的封装

var obj={
i:0,
fadeInTime:200,
fun1:function(){
alert(this.i);
},
fun2:function(){
this.fun1;
}
}
obj.i=10;
obj.fun2();

4、jQuery插件

(function($) {
$.fn.PluginName = function(opts) {
var defaults = {
// 插件自定义选项的默认值
};
// 以用户的自定义选项覆盖默认选项
var options = $.extend(defaults, opts || {});
return this.each(function() { // 让插件支持链式操作
// 在这里编写插件功能代码
});
};
})(jQuery);
(function($) {
$.fn.PluginName = function(opts) {
var defaults = {
// 插件自定义选项的默认值
};
// 以用户的自定义选项覆盖默认选项
var options = $.extend(defaults, opts || {});
var fun1=function(){
}
$.fn.PluginName.fun2=function(k){
//some code
}
};
})(jQuery);
jQuery(function(){
jQuery(obj).PluginName({
//参数
}
);
jQuery(obj).PluginName.fun2();
})