这次分享的代码是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="/UploadFiles/2021-04-02/img.jpg">
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,焦点图片轮播
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jQuery插件实现带圆点的焦点图片轮播切换”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。