jQuery插件实现带圆点的焦点图片轮播切换

这次分享的代码是jQuery插件，HovertreeImg是一个图片轮播jquery插件，使用方便，可以设置大小，圆点位置等，代码简洁

<！DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><base target="_blank" /><meta charset="utf-8" /><style>#img {width:768px;height:66px;overflow:hidden}#img img{width:100%;height:100%;}#img #imgcontent{display:none}a{color:blue}</style></head><body><div id="img"><a href="/h/bjaf/hovertreeimg.htm" title="Img" target="_blank"><img src="/jq/img/img.jpg" alt="Img插件" /></a><div id="imgcontent"><a href="/h/bjaf/easysector.htm" title="HTML5百分比饼图" target="_blank"><img src="/themes/img/easysector.gif" alt="EasySector插件" /></a><a href="/texiao/game/" title="见缝插针" target="_blank"><img src="/themes/img/jfcz.gif" alt="见缝插针" /></a> </div></div><div><br /><br /></div> <script src="/ziyuan/jquery/jquery-1.12.0.min.js"></script><script src="/jq/hovertreeimg/jquery.img.js"></script><script>$（"#img"）.hovertreeimg（{"h_circlePosition": "",//left,right,center"h_width": 768,"h_height": 66,"h_borderColor":"silver","h_circleWidth": 14}）;</script></body></html>

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 < 1）return;h_hovertreeimg.css（{"position": "relative", "border":"solid 1px "+ settings.h_borderColor, "width": settings.h_width, "height": settings.h_height, "overflow": "hidden"}）var h_hovertreeimgcontent = h_hovertreeimg.find（">div#hovertreeimgcontent"）;h_hovertreeimgcontent.hide（）;var h_hovertreeimgcurrent = h_hovertreeimg.find（">a"）;h_hovertreeimgcurrent.wrap（"<div id="replaceframe"></div>"）;h_replaceFrame = h_hovertreeimg.find（"#replaceframe"）.css（{ "width": "100%", "height": "100%" }）;//构造圆点框$（"<div class="hovertreeimgpoint"></div>"）.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 < 2）h_hovertreeimgindex = 0;//构造圆点for （var h_i = 0; h_i < h_hovertreeimglength; h_i++） {h_hovertreeimgpoint.append（"<div hovertreeimgdata="" + h_i + "" id="hovertreeimgpoint" + h_i + ""></div>"）;}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））;