$(document).ready(function(){ $('#sddm li').hover(function(){ $(this).children("div").css("display","block"); },function(){ $(this).children("div").css("display","none"); }) }); /* fucus*/ $(function () { var swidth = $("#focus").width(); //获取焦点图的宽度(显示面积) var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var pictimer; //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 var btn = "
"; for (var i = 0; i < len; i++) { btn += ""; } btn += "
"; $("#focus").append(btn); $("#focus .btnbg").css("opacity", 0.3); //为小按钮添加鼠标滑入事件,以显示相应的内容 $("#focus .btn span").css("opacity", 0.3).mouseenter(function () { index = $("#focus .btn span").index(this); showpics(index); }).eq(0).trigger("mouseenter"); //上一页、下一页按钮透明度处理 $("#focus .prenext").css("opacity", 0.1).hover(function () { $(this).stop(true, false).animate({ "opacity" : "0.3" }, 300); }, function () { $(this).stop(true, false).animate({ "opacity" : "0.1" }, 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); //为当前的按钮切换到选中的效果 } }); (function (jquery) { jquery.fn.extend({ /** *@description 无缝滚动 支持匀速上下左右和垂直翻滚上下 *@param { * direction:string,//滚动方向 值域:top|left|bottom|right|up|down * speed:string//滚动速度(垂直翻滚时为停留时间) * } o *@example *html结构 *
* *
*mar样式应该包含height,width,background等 注意不要覆盖了插件附加上去的样式 *调用: *jquery("#mar").marquee({ * direction:"top", * speed:30 *}) * */ marquee:function (o) { var it = this, d = o.direction || 'left', //滚动方向 默认向左 s = o.speed || 30, //速度 默认30毫秒 mar = jquery(it), mp1 = jquery(it).children(0).attr({id:"mp1"}), marqueefunc = getmarquee(d), marrun = marqueefunc ? setinterval(marqueefunc, s) : function () { return false; };//开始滚动 //鼠标悬停事件 jquery(it).hover(function () { clearinterval(marrun); }, function () { marrun = setinterval(marqueefunc, s); }) /*生成滚动函数 *1.判断方向 *2.装载css *3.判断需不需要滚动 *4.构造函数 */ function getmarquee(d) { var marqueefunc; switch (d) { //水平向左 case "left": mar.addclass("plus-mar-left"); var liheight = mar[0].offsetheight; mar.css({"line-height":liheight + "px"}); if (mp1[0].offsetwidth < mar[0].offsetwidth) return false; mp1.clone().attr({id:"mp2"}).appendto(mar); marqueefunc = function () { if (mar[0].scrollleft >= mp1[0].scrollwidth) { mar[0].scrollleft = 0; } else { mar[0].scrollleft++; } } break; //水平向上 case "top": mar.addclass("plus-mar-top"); if (mp1.outerheight() <= mar.outerheight()) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendto(mar); marqueefunc = function () { var scrolltop = mar[0].scrolltop; if (mp1[0].offsetheight > scrolltop) { mar[0].scrolltop = scrolltop + 1; } else { mar[0].scrolltop = 0; } } break; //水平向右 case "right": mar.addclass("plus-mar-left"); var liheight = mar[0].offsetheight; mar.css({"line-height":liheight + "px"}); if (mp1[0].offsetwidth <= mar[0].offsetwidth) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendto(mar); marqueefunc = function () { if (mar[0].scrollleft <= 0) { mar[0].scrollleft += mp2[0].offsetwidth; } else { mar[0].scrollleft--; } } break; //水平向下 case "bottom": mar.addclass("plus-mar-bottom"); if (mp1[0].offsetheight <= mar[0].offsetheight) return false; var mp2 = mp1.clone().attr({id:"mp2"}).appendto(mar); mar[0].scrolltop = mar[0].scrollheight; marqueefunc = function () { if (mp1[0].offsettop >= mar[0].scrolltop) { mar[0].scrolltop += mp1[0].offsetheight; } else { mar[0].scrolltop--; } } break; //垂直翻滚 向上 case "up": mar.addclass("plus-mar-up"); var liheight = mar[0].offsetheight; mp1.css({"line-height":liheight + "px"}); marqueefunc = function () { var currli = it.eq(0).find("ul:first"); currli.animate({ margintop:-liheight }, 500, function () { currli.find("li:first").appendto(currli); currli.css({margintop:0}); }) } break; //垂直翻滚 向下 case "down": mar.addclass("plus-mar-down"); var liheight = mar[0].offsetheight, lilength = mp1.children().length, topinit = -(lilength - 1) * liheight + "px"; mp1.css({"top":topinit, "line-height":liheight + "px"}); marqueefunc = function () { var currli = it.eq(0).find("ul:last"); currli.animate({ margintop:liheight }, 500, function () { currli.find("li:last").prependto(currli); currli.css({margintop:0}); }) } break; default: { marqueefunc = null; alert("滚动插件:传入的参数{direction}有误!"); } } return marqueefunc; } } }) })(jquery);