jQuery插件实现带圆点的焦点图片轮播切换_jquery
程序员文章站
2022-05-11 21:44:13
...
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁
");
}
h_pointset = h_hovertreeimgpoint.find("div");//圆点集合
h_pointset.css({
"background-color": settings.h_circleColor, "width": settings.h_circleWidth
, "height": settings.h_circleWidth
, "border": "1px solid white"
, "margin-left": "2px",
"display": "inline-block",
"border-radius": "50%"
})
h_pointset.eq(0).css({ "background-color": settings.h_currentCircleColor });
//设置当前图片
function imgswitch(imgindex) {
h_replaceFrame.html(h_hovertreeimgitems.eq(imgindex));
h_pointset.css({ "background-color": settings.h_circleColor });
h_pointset.eq(imgindex).css({ "background-color": settings.h_currentCircleColor });
}
h_replaceFrame.find("img").css({
"width": settings.h_width
, "height": settings.h_height
})
//圆点操作
h_pointset.hover(function () {
h_isswitch = false;//光标悬停到圆点停止切换
imgswitch($(this).attr('hovertreeimgdata'));
}
, function () {
h_isswitch = true;
}
)
//切换
setInterval(function () {
if (!h_isswitch)
return;
imgswitch(h_hovertreeimgindex);
h_hovertreeimgindex = (h_hovertreeimgindex + 1) % h_hovertreeimglength;
}, settings.h_time)
//光标悬停到图片停止切换
h_replaceFrame.hover(function () { h_isswitch = false; }, function () { h_isswitch = true; })
}
}(jQuery));
jquery.img.js
/*! * HovertreeImg(jQuery Plugin) * version: 1.0.0 * Copyright (c) 2016 HoverTree */ (function ($) { $.fn.hovertreeimg = function (options) { var settings = $.extend({ h_time:"3000",//切换时间 h_borderColor: "transparent",//边框颜色 h_width: "500",//宽度 h_height: "200",//高度 h_circleWidth: "18",//方框边长 h_circleColor:"silver",//圆点颜色 h_currentCircleColor: "red",//当前圆点颜色 h_circlePosition:"right"//圆点位置 }, options); var h_hovertreeimg = $(this); if (h_hovertreeimg.length div#hovertreeimgcontent"); h_hovertreeimgcontent.hide(); var h_hovertreeimgcurrent = h_hovertreeimg.find(">a"); h_hovertreeimgcurrent.wrap(""); h_replaceFrame = h_hovertreeimg.find("#replaceframe").css({ "width": "100%", "height": "100%" }); //构造圆点框 $('').appendTo(h_hovertreeimg); var h_hovertreeimgpoint = h_hovertreeimg.find(".hovertreeimgpoint"); h_hovertreeimgcontent.prepend(h_hovertreeimgcurrent.clone(true));//复制到总a集合 var h_hovertreeimgitems = h_hovertreeimgcontent.children();//所有a标签集合 var h_hovertreeimglength = h_hovertreeimgitems.length;//所有轮播项数量 var h_isswitch = true;//是否轮播 var h_circleWidth = parseInt(settings.h_circleWidth); //加边框与间隔 var h_circleFrameWidth = (h_circleWidth + 4) * h_hovertreeimglength+2; h_hovertreeimgpoint.css({ "height": (h_circleWidth + 4), "position": "absolute", "bottom": "0px", "display": "inline-block" }) //设置圆点位置 switch (settings.h_circlePosition) { case 'right': h_hovertreeimgpoint.css({ "right": "0px" }) break; case 'left': h_hovertreeimgpoint.css({ "left": "0px" }) break; default: h_hovertreeimgpoint.css({ "left": "0px", "right": "0px", "width": h_circleFrameWidth + "px", "margin": "0px auto" }) break; } //切换索引 var h_hovertreeimgindex = 1; if (h_hovertreeimglength
推荐阅读
-
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
-
完美兼容各大浏览器的jQuery插件实现图片切换特效
-
jQuery 带炫酷轮播图效果的Lightbox弹出层插件 只要一句代码轻松实现功能
-
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
-
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)_jquery
-
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)_jquery
-
完美兼容各大浏览器的jQuery插件实现图片切换特效_jquery
-
jQuery插件实现带圆点的焦点图片轮播切换_jquery
-
jQuery插件实现带圆点的焦点图片轮播切换_jquery
-
jQuery实现的图片分组切换焦点图插件_jquery