jQuery封装方法问题

下面是我从网上找的一个淡入淡出图片轮换效果代码，自己又改进了下，现在不知道该怎么解决这个问题：当一个页面有俩个需要这个效果的地方该怎么办？有人说$.fn.extend，看了网上的一些资料还是不怎么明白，希望高手帮忙改进下这段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery淡入淡出</title>
<style type="text/css">
body { background-color:#F3F3F3; color:#333; }
body, input, textarea, select { font-size:12px; font-family:"微软雅黑", "宋体", Tahoma; }
body, h1, h2, h4, p, ul, dl, dd, form { margin:0; }
ul, ol { padding-left:0; list-style:none outside; }
img { border:0; display:block; }
#play { margin:100px auto 0; width:346px; height:191px; position:relative; overflow:hidden; }
#loading { width:100%; line-height:191px; background-color:#FFF; text-align:center; color:#C00036; position:absolute; z-index:13; left:0; top:0; }
#play_bg { position:absolute; bottom:0; left:0; background-color:#000; height:26px; width:100%; filter:alpha(Opacity=70); opacity:0.7; z-index:10; }
#play_info{ position:absolute; bottom:0; left:0; padding:0 10px; font-weight:bold; font-size:14px; line-height:28px; color:#fff; z-index:11; }
#play_text { position:absolute; z-index:12; }
#play_text li { width:14px; line-height:14px; text-align:center; float:left; background-color:#000; color:#FFF; cursor:pointer; }
#play_text li.hover { background-color:#FFF; color:#000; }
#play_list div { display:none; width:346px; height:191px; position:absolute; overflow:hidden; }
#play_list img { width:346px; height:191px; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id="play">
<div id="loading"><strong>Loading...</strong></div>
<div id="play_bg"></div>
<div id="play_info"></div>
    <ul id="play_text">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
<div id="play_list">
        <div><a href="#"><img onload="finishImg()" src="http://img.article.pchome.net/new/w600/00/25/81/29/pic_lib/wm/fjxw_4.jpg" alt="图片标题1" /></a></div>
        <div><a href="#"><img onload="finishImg()" src="http://hiphotos.baidu.com/airskyandsea/pic/item/80ad8e1fe7669b5af724e4f1.jpg" alt="图片标题2" /></a></div>
        <div><a href="#"><img onload="finishImg()" src="http://image5.poco.cn/mypoco/myphoto/20080404/20/37032281200804042047054026803269614_006_640.jpg" alt="图片标题3" /></a></div>
        <div><a href="#"><img onload="finishImg()" src="http://image.poco.cn/mypoco/myphoto/20071016/17/3950745520071016175044609_003_640.jpg" alt="图片标题4" /></a></div>
</div>
</div>
<script type="text/javascript">
var t = n = 0, count = $("#play_list div").size(), picNum = 0;
function finishImg(){
picNum++;
if(picNum == count){
$('#loading').fadeOut('fast');
focusImg();
}
}
function focusImg(){
$("#play_list div").eq(0).show();
$("#play_info").html($("#play_list div").eq(0).find("img").attr('alt'));
$("#play_text li").eq(0).addClass('hover');
$("#play_text li").click(function(){
var i = $(this).index(); n = i;
if (i >= count) return;
$("#play_info").html($("#play_list div").eq(i).find("img").attr('alt'));
$("#play_list div").filter(":visible").fadeOut(800);
$("#play_list div").eq(i).fadeIn(800);
$(this).addClass('hover').siblings().removeClass('hover');
});
t = setInterval("showAuto()", 2000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000)});
}
function showAuto(){
n = n >= (count - 1) ? 0 : ++n;
$("#play_text li").eq(n).trigger('click');
}
</script>
</body>
</html>

解决方案 »

  1.   

     准备复制一个的，结果失败了，把注释给楼主，希望对楼主有帮助！<script type="text/javascript">
            //count=div的总数量        
            var t = n = 0, count = $("#play_list div").size(), picNum = 0;
            function finishImg() {
                picNum++;
                //当图片加载完成以后，隐藏加载层
                if (picNum == count) {
                    $('#loading').fadeOut('fast');
      //掉用改方法
                    focusImg();
                }
            }
            function focusImg() {            //让id=play_list下面的第一个层显示
                $("#play_list div").eq(0).show();
                //跟id=play_info。添加图片标题：如：图像显示的（图片标题1）
                $("#play_info").html($("#play_list div").eq(0).find("img").attr('alt'));
                //跟第一个li签添加样式
                $("#play_text li").eq(0).addClass('hover');
                //绑定所有li标签的点击事件
                $("#play_text li").click(function () {
                    //alert($(this).index());
                    //获取当前点击li标签的下标  把值赋给n变量
                    var i = $(this).index(); n = i;
                    //判断如果下标大于层的数量，就return回去
                    if (i >= count) return;
                    //否则 获取当前图片的标题。
                    $("#play_info").html($("#play_list div").eq(i).find("img").attr('alt'));
                    //移除上一次点击的图片
                    $("#play_list div").filter(":visible").fadeOut(800);
                    //加载当前点击的图片
                    $("#play_list div").eq(i).fadeIn(800);
                    //跟所有的li标签添加hover样式，然后当前的li移除hover样式
                    $(this).addClass('hover').siblings().removeClass('hover');
                });
                //每隔两秒，调用方法
                t = setInterval("showAuto()", 2000);
                //事件切换，清除定时器，添加定时器
                $("#play").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 2000) });
            }
            function showAuto() {
                //n 当前点击的下标数，如果大于就等于0，否则n+1
                n = n >= (count - 1) ? 0 : ++n;
                //绑定当前li的点击事件
                $("#play_text li").eq(n).trigger('click');
            }
        </script>
      

  2.   

        $.fn.extend方法写插件可行，但是还有很多东西需要去调试！比较麻烦！
       建议楼主在网上找一个淡入淡出的插件，JQ的肯定有这种插件的！认真找下，看下说明，很快就能上手的！
      

  3.   

    jQuery.extend({
       'name':{
            'init':function(){},    }
    })