jquery实现的带数字标注的焦点图片切换
demo01.html
/*** 手动滚动图片* **/$.extend({ imgfocus: function(opt, callback) { //alert("suc"); this.defaults = { // 滚动区域id objId: "", // 是否在大图下方显示标题 showTitle: false, // 每行的宽度 width: 300, // div的高度 height: 100, // 每次滚动的行数 line: 1, // 自动滚动的行数 autoLine: 1, // 动作时间 speed: 0, // 滚动间隔 interval: 3000, // 图片根目录 imgPath: "", // 间隔句柄，不需要设置，只是作为标识使用 picTimer: 0,// 按钮透明度 opacity: 0.3 }; //参数初始化 var opts = $.extend(this.defaults, opt); // 定义外层元素样式 $("#" + opts.objId).css({ "position": "relative", "overflow": "hidden", "width": (opts.line * opts.width) + "px" }); // 定义ul样式 $("#" + opts.objId + " ul").css({ "width": opts.width * $("#" + opts.objId + " ul").find("li").size() + "px", "height": opts.height + "px" }); // 定义li样式 $("#" + opts.objId + " ul li").css({ "display": "block", "float": "left", "width": opts.width + "px", "height": opts.height + "px" }); // 定义img样式 $("#" + opts.objId + " ul li img:first").css({ "display": "block", "float": "left", "width": opts.width + "px", "height": opts.height + "px" }); if (opts.showTitle) { $("#" + opts.objId).append("<div id=\"imgfocus_banner\" />"); $("#imgfocus_banner").css({ "width": opts.width + "px", "height": "20px", "background": "#333", "position": "absolute", opacity: 0.7, "text-align": "center", "color": "#FFF", "left": "0px", "top": (opts.height - 20) + "px" }); $("#imgfocus_banner").html("<div id=\"imgfocus_banner_title\" />"); $("#imgfocus_banner_title").text("text"); $("#imgfocus_banner_title").css({ "display": "block", "float": "left", "width": (opts.width - 20 * $("#" + opts.objId + " ul li").size()) + "px", "height": "20px" }); $("#" + opts.objId + " ul li").each(function(index) { $(this).attr("index", index); $("#imgfocus_banner").append("<div id=\"imgfocus_banner_squ" + index + "\" class=\"imgfocus_banner_squ\" >" + (index + 1) + "</div>"); var bgColor; $("#imgfocus_banner_squ" + index).mouseover(function() { bgColor = $(this).css("background"); $(this).css({ "background": "#CC0" }); }).mouseleave(function() { $(this).css({ "background": bgColor }); }); // 数字块点击事件 $("#imgfocus_banner_squ" + index).click(function() { var length = $("#" + opts.objId + " ul li[index=" + index + "]").prevAll().size(); var scrollWidth = 0 - length * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", ""));$("#" + opts.objId).find("ul:first").animate({marginLeft: scrollWidth},6,function() {for (i = 1; i <= length; i++) {$("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first"));}$("#" + opts.objId).find("ul:first").css({marginLeft: 0});var index = $("#" + opts.objId).find("li:first").attr("index");// 数字标签全部变灰色$(".imgfocus_banner_squ").css({"background": "#CCC"});// 活动的数字标签变红色$("#imgfocus_banner_squ" + index).css({"background": "#C00"});bgColor = "background:#C00";changeTitle();}); }); }); // 数字块样式 $(".imgfocus_banner_squ").css({ "display": "block", "float": "left", "margin": "1px", "width": "18px", "height": "18px", "color": "#000", "background": "#CCC" }); // 第一个数字块样式 $(".imgfocus_banner_squ:first").css({ "background": "#C00" }); } /** * 自动横向滚动 */ function scrollLeft() { var scrollWidth = 0 - opts.autoLine * opts.width - (0 - $("#" + opts.objId).find("ul:first").css("margin-left").replace("px", "")); $("#" + opts.objId).find("ul:first").animate({ marginLeft: scrollWidth }, opts.speed, function() { for (i = 1; i <= opts.autoLine; i++) { $("#" + opts.objId).find("li:first").appendTo($("#" + opts.objId).find("ul:first")); } $("#" + opts.objId).find("ul:first").css({ marginLeft: 0 }); var index = $("#" + opts.objId).find("li:first").attr("index");changeTitle(); // 数字标签全部变灰色 $(".imgfocus_banner_squ").css({ "background": "#CCC" }); // 活动的数字标签变红色 $("#imgfocus_banner_squ" + index).css({ "background": "#C00" }); }); };/** * 切换标题 */function changeTitle(){$("#imgfocus_banner_title").text($("#" + opts.objId).find("li:first img:first").attr("alt"));} /** * 鼠标滑上后显示按钮 */ $("#" + opts.objId).hover(function() { $("#button_left").css({ opacity: 1 }); $("#button_right").css({ opacity: 1 }); }, function() { $("#button_left").css({ opacity: opts.opacity }); $("#button_right").css({ opacity: opts.opacity }); }).trigger("mouseleave"); /** * 最先执行的函数 * 鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 */ // 初始化标题changeTitle(); $("#" + opts.objId).hover(function() { clearInterval(opts.picTimer); }, function() { opts.picTimer = setInterval(function() { scrollLeft(); }, opts.interval); // 自动播放的间隔，单位：毫秒 }).trigger("mouseleave"); }});