jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件，HovertreeImg是一个图片轮播jquery插件，使用方便，可以设置大小，圆点位置等，代码简洁
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<basetarget="_blank"/>
<metacharset="utf-8"/>
<style>#img{width:768px;height:66px;overflow:hidden}
#imgimg{width:100%;height:100%;}
#img#imgcontent{display:none}a{color:blue}</style>
</head>
<body>
<divid="img">
<ahref="/h/bjaf/hovertreeimg.htm"title="Img"target="_blank"><imgsrc="/jq/img/img.jpg"alt="Img插件"/></a>
<divid="imgcontent">
<ahref="/h/bjaf/easysector.htm"title="HTML5百分比饼图"target="_blank"><imgsrc="/themes/img/easysector.gif"alt="EasySector插件"/></a>
<ahref="/texiao/game/"title="见缝插针"target="_blank"><imgsrc="/themes/img/jfcz.gif"alt="见缝插针"/></a>
</div>
</div>
<div>
<br/><br/>
</div>
<scriptsrc="/ziyuan/jquery/jquery-1.12.0.min.js"></script>
<scriptsrc="/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(jQueryPlugin)
*version:1.0.0
*Copyright(c)2016HoverTree
*/
(function($){
$.fn.hovertreeimg=function(options){
varsettings=$.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);
varh_hovertreeimg=$(this);
if(h_hovertreeimg.length<1)
return;
h_hovertreeimg.css({
"position":"relative","border":"solid1px"+settings.h_borderColor
,"width":settings.h_width,"height":settings.h_height
,"overflow":"hidden"
})
varh_hovertreeimgcontent=h_hovertreeimg.find(">div#hovertreeimgcontent");
h_hovertreeimgcontent.hide();
varh_hovertreeimgcurrent=h_hovertreeimg.find(">a");
h_hovertreeimgcurrent.wrap("<divid='replaceframe'></div>");
h_replaceFrame=h_hovertreeimg.find("#replaceframe").css({"width":"100%","height":"100%"});
//构造圆点框
$('<divclass="hovertreeimgpoint"></div>').appendTo(h_hovertreeimg);
varh_hovertreeimgpoint=h_hovertreeimg.find(".hovertreeimgpoint");
h_hovertreeimgcontent.prepend(h_hovertreeimgcurrent.clone(true));//复制到总a集合
varh_hovertreeimgitems=h_hovertreeimgcontent.children();//所有a标签集合
varh_hovertreeimglength=h_hovertreeimgitems.length;//所有轮播项数量
varh_isswitch=true;//是否轮播
varh_circleWidth=parseInt(settings.h_circleWidth);
//加边框与间隔
varh_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":"0pxauto"
})
break;
}
//切换索引
varh_hovertreeimgindex=1;
if(h_hovertreeimglength<2)
h_hovertreeimgindex=0;
//构造圆点
for(varh_i=0;h_i<h_hovertreeimglength;h_i++){
h_hovertreeimgpoint.append("<divhovertreeimgdata='"+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":"1pxsolidwhite"
,"margin-left":"2px",
"display":"inline-block",
"border-radius":"50%"
})
h_pointset.eq(0).css({"background-color":settings.h_currentCircleColor});
//设置当前图片
functionimgswitch(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));