您的位置：首页 > Web前端 > JQuery

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

2016-01-18 08:59 851 查看

这次分享的代码是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));

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 焦点图片轮播

相关文章推荐

新的分享

章节导航