jQuery封装方法问题

momozzzzz 2011-01-06 12:22:03
下面是我从网上找的一个淡入淡出图片轮换效果代码，自己又改进了下，现在不知道该怎么解决这个问题：当一个页面有俩个需要这个效果的地方该怎么办？有人说$.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>
...全文
585 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
momozzzzz 2011-01-11
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 theforever 的回复:]

没什么难度，只是个辛苦活，楼主就是来偷懒来的吧。
[/Quote]
[Quote=引用 5 楼 falizixun2 的回复:]

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

我是要学习如何封装，找插件我就不会在这说了。
Mr-Jee 2011-01-07
  • 打赏
  • 举报
 回复
jQuery.extend({
'name':{
'init':function(){},

}
})
momozzzzz 2011-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 hb_yanhu 的回复:]

准备复制一个的，结果失败了，把注释给楼主，希望对楼主有帮助！

<script type="text/javascript">
//count=div的总数量
var t = n = 0, count = $("#play_list div").size(), picNum = 0;
function finishImg……
[/Quote]
谢谢，这些我都明白。
momozzzzz 2011-01-07
  • 打赏
  • 举报
 回复
我是要学习如何封装，找插件我就不会在这说了。
kaifadi 2011-01-06
  • 打赏
  • 举报
 回复
$.fn.extend方法写插件可行，但是还有很多东西需要去调试！比较麻烦！
建议楼主在网上找一个淡入淡出的插件，JQ的肯定有这种插件的！认真找下，看下说明，很快就能上手的！
碧海情天-赵亮 2011-01-06
  • 打赏
  • 举报
 回复
没什么难度，只是个辛苦活，楼主就是来偷懒来的吧。
子夜__ 2011-01-06
  • 打赏
  • 举报
 回复
Quinn2 2011-01-06
  • 打赏
  • 举报
 回复
准备复制一个的，结果失败了，把注释给楼主，希望对楼主有帮助！

<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>
yhtapmys 2011-01-06
  • 打赏
  • 举报
 回复
不是有现成的插件么？找一个。
jQuery ui Datepicker日期插件
jquery的日期插件Datepicker，这两天正好研究完了，将研究结果分享下，单独的封装汉化版本，都有注释，好修改也好使用，注意保持images里面图片的名称和路径，red-datepicker.css可以定义日期div的样式，我自己在源...
jQuery实现可拖拽删除小图标回收站 源码程序
利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素，需要拖动应用图标至垃圾箱即可删除这个图标。主要包括HTML代码、CSS3代码以及jQuery代码。HTML代码主要定义了一个回收站文件夹的容器，以及各个小...
jQuery入门到精通
课程列表如下：01_jQuery简介02_jQuery事件03_jQuery事件04_jQuery隐藏_显示05_jQuery滑动06_jQuery动画07_jQuery停止动画08_jQuery回调方法_链调用09_jQuery属性值操作10_jQuery添加元素11_jQuery操作样式12_...
SpringMVC+MyBatis+EasyUI(Jquery)的权限控制案例
采用SpringMVC+Mybatis等主流框架 前端：使用Jquery和Easyui技术.JS封装简洁，操作简单。案例包含了用户、角色、模块等增删改查及分页，给角色设置权限后，用属于这个角色的用户登录即可。Easyui界面简洁美观，代码...
封装jquery的方法
•只有 jQuery 对象才能使用 ...•jQuery 对象中封装了多个 DOM 对象，同时 jQuery 对象是类数组对象。jQuery 对象是一个类数组对象，可以通过 [] 方式，得到对应的 DOM 对象。•jQuery 对象 ---- 底层就是 dom 对象。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章