来园第一篇文章【jquery 滚动插件】
2011-12-12 21:03 by 陈放, 506 visits, 收藏, 编辑
//内部定制开放
//author:陈放,
//email:lanhaigcb@163.com
//qq:314247352
(function ($) {
var obj = null;
var time = 2000;
var t;
$.fn.hkRoll = function (options) {
obj = this;
var defaults = {
imgUrlList: "", //图片地址,号隔开
idList: "", //id地址,号隔开
redirectUrl: "", //要跳转的地址
isOpenUrl: false, //是否打开新页面
time: 3000
};
var options = $.extend(defaults, options);
var imgList = options.imgUrlList.split(',');
var idList = options.idList.split(',');
loaddata(imgList); //加载图片
var liCount = $(this).find("ol li").length;
loaddata(liCount); //加载数字
time = options.time;
t = setTimeout(refrsh, options.time);
$(obj).find("ul li").bind("click", bindClick);
bindImgClick();
bindLink(options.idList, options.redirectUrl, options.isOpenUrl);
};
//像div中填充数据
var loaddata = function (e) {
var temp = "";
if (isNaN(e)) {
$.each(e, function () {
temp += "<li><img src='" + this + "'/></li>";
});
$(obj).append("<ol>" + temp + "</ol>");
}
else {
for (var i = 1; i <= e; i++) {
temp += "<li>" + i + "</li>";
}
$(obj).append("<ul>" + temp + "</ul>");
$(obj).find("ul li:last").css("margin-right", "5px");
}
};
//控制显示隐藏
var getImg = function (index) {
$(obj).find("ol li").hide();
$(obj).find("ul li").removeClass("focusLi");
$(obj).find("ol li:eq(" + index + ")").fadeIn(1000);
$(obj).find("ul li:eq(" + index + ")").addClass("focusLi");
};
//定时刷新图片
var refrsh = function () {
var index = $(obj).find("ol li:visible").index();
if (index == -1) {
$(obj).find("ol li:first").show();
$(obj).find("ul li:first").addClass("focusLi");
} else {
if (index != $(obj).find("ol li").length - 1) {
index = index + 1;
}
else {
index = 0;
}
getImg(index);
}
t = setTimeout(refrsh, time);
};
//当点击小图标选择相应的大图
var bindClick = function (e) {
var index = $(this).index();
getImg(index);
};
//当鼠标放在图片上停止滚动
var bindImgClick = function () {
$(obj).find("ol li").hover(function () {
clearTimeout(t);
}, function () {
clearTimeout(t);
t = setTimeout(refrsh, time);
});
};
//点击图片跳转
var bindLink = function (idsList, redirectUrl, isOpenUrl) {
$(obj).find("ol li").live("click", function () {
var index = $(this).index();
if (isOpenUrl) {
window.open(redirectUrl + idsList[index]);
}
else {
location.href = redirectUrl + idsList[index];
return false;
}
});
};
})(jQuery);
前台代码:
<!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>
<title>滚动新闻</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/hkRoll.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#flash").hkRoll(
{ imgUrlList: "images/1.jpg,images/2.jpg,images/3.jpg,images/4.jpg",//图片地址
idList: "1,2,3,4",//Id参数
redirectUrl: "http://www.baidu.com?t=",//要转到的地址
isOpenUrl: true, //是否打开新窗体
time: 3000//滚动间隔时间 毫秒单位
});
});
</script>
</head>
<body>
<div id="flash">
</div>
</body>
</html>
注册博客园一年多了一直都是吸取大鸟们的经验，今天发表了我的第一篇文章，点击下载
http://www.cnblogs.com/kingxp/archive/2011/12/12/2285293.html