appcan Slider 图片轮播组件如何使用
发布网友
发布时间：2022-05-14 22:07
共2个回答
懂视网
时间：2022-05-15 02:28
经过几天的尝试和学习，封装了自己的第一个js组件,有很多不足之处还请赐教。
因为一些业务需求，需要给图片添加一些标注，从网上找了一些但都不能满足需求，并且存在一些bug，坑太多
因此就有想法自己封装一个，学习了其他类似组件的实现思路，以及js组件的开发思路，开发了jquery.picsign组件
jQuery图片标注组件（jquery.picsign）
在线演示：http://artlessbruin.gitee.io/picsign/
gitee：https://gitee.com/ArtlessBruin/PicSign
1. 组件依赖
jquery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
bootstrap
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
layer
<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
webui-popover
<link href="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>
2. 引用组件文件
<link href="css/jquery.picsign.css" rel="external nofollow" rel="stylesheet" /> <script src="js/jquery.picsign.js"></script>
3. 使用
在页面中加入一个p
<p id="picsign"></p>
初始化组件
$("#picsign").picsign(option);
//option为组件参数，详细说明见option参数说明option参数说明
var option={
picurl: null,//图片地址
signdata: [],//初始数据,详细说明参见基本数据格式
editable: {//是否可编辑(默认可编辑 设置为false则禁用所有编辑)
add: true,//是否可添加
update: true,//是否可修改
del: true,//是否可删除
move: true//是否可移动
},
signclass: 'signdot',//标注点样式
popwidth: 400,//标注内容显示窗口宽
popheight: 247,//标注内容显示窗口高
inputwidth: 400,//标注内容编辑窗口宽
inputheight: 247,//标注内容编辑窗口高
beforeadd: function (data) {//在添加保存前执行的方法，返回false阻断添加
},
onadd: function (data) {//添加完成执行的方法
},
beforeupdate: function (data) {//在修改保存前执行的方法，返回false阻断修改
},
onupdate: function (data) {//修改完成执行的方法
},
beforedel: function (data) {//在删除保存前执行的方法，返回false阻断删除
},
ondel: function (data) {//删除完成执行的方法
}
};基本数据格式
[{
left:'50%',
top:'50%',
msg:'这是标注信息',
signid:'这是标注唯一标识符，用户无需赋值，与组件逻辑相关，请不要使用此关键字'
}]用户添加的数据中必须包含left、top、msg属性
用户可自行扩展其他属性
特殊说明：请不要添加和使用signid关键字
方法调用
$("#picsign").picsign('functionName',parameter);
//functionName为方法名称，parameter为方法参数，详细说明参见方法说明方法说明
获取标注数据
方法名称：getData
参数：无
$("#picsign").picsign('getData');添加标注数据
方法名称：addSign
参数：基本数据Json,是否触发事件（默认为true）
$("#p_picsign").picsign("addSign",
[{ left: '50%', top: '10%', msg: "123"},
{ left: '80%', top: '10%', msg: "456"}],
true
)切换标注显示状态
方法名称：toggle
参数：无
$("#p_picsign").picsign("toggle")组件销毁
方法名称：destroy
参数：无
$("#p_picsign").picsign("destroy")上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在JS中命令模式概念与用法（详细教程）
使用selenium抓取淘宝数据信息
使用百度地图如何实现地图网格
热心网友
时间：2022-05-14 23:36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{ margin:0; padding:0; font-size:12px; background:#fff}
ul, li{ list-style-type:none; margin:0; padding:0; font-weight:normal; font-style:normal}
.btn{ height:16px; float:left; padding:20px}
.btn a{ width:16px; height:16px; text-align:center; line-height:16px; font-size:11px; float:left; margin-left:5px; cursor:pointer; background:#00F; color:#fff}
.btn a:hover, .btn .cur{ background:#F60; text-decoration:none}
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
PicEve()
})
var i,sum,text;
function PicEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
sum = $pic_li.length;
text="";
for( b=0; b<sum; b++){
text += "<a></a>"
}
$btn.html(text)
$btn.find("a").each(function(b,n){
$(n).attr("index",b)
$(n).html(b+1)
})
$btn.find("a").eq(0).addClass("cur")
$btn.find("a").click(function(e){
i=parseInt($(this).attr("index"));
c=parseInt($("#btn a[class='cur']").attr("index"));
if( i!=c ){
$btn.find("a").removeClass("cur");
$(this).addClass("cur");
}
//clearInterval(Play);
});
//$(document).mouseout(function(e){
// setInterval(PlayEve, 2000);
// });
}
//自动播放
var Play = setInterval(PlayEve, 2000);
function PlayEve(){
var $pic_li = $("#pic li");
var $btn = $("#btn");
i=parseInt($("#btn a[class='cur']").attr("index"))
sum = $pic_li.length;
if( i < sum - 1){
$btn.find("a").eq(i).removeClass("cur");
$btn.find("a").eq(i+1).addClass("cur");
i++
}else if(i==sum-1){
$btn.find("a").eq(sum-1).removeClass("cur");
$btn.find("a").eq(0).addClass("cur");
i=0
}
}
</script>
</head>
<body>
<ul id="pic" class="pic">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="btn" class="btn"></div>
</body>
</html>
