代码拉取完成,页面将自动刷新
基于原生js实现的圆形菜单导航旋转切换,支持手动修改焦点图,可自定义焦点图动画,支持动态添加、删除元素等
<div class="circleCenter" id="circlecenter">
<div class="bgBox">
<img src="img/bg.jpg"/>
</div>
<div class='rotation-turn'>
<div class='rotation-item'>
<div class="rotation-animat">
<img src="img/img1.png"/>
</div>
</div>
</div>
<div class='rotation-turn'>
<div class='rotation-item'>
<div class="rotation-animat">
<img src="img/img2.png"/>
</div>
</div>
</div>
<div class='rotation-turn'>
<div class='rotation-item'>
<div class="rotation-animat">
<img src="img/img3.png"/>
</div>
</div>
</div>
</div>
<div class="bgBox">
<img src="img/bg.jpg"/>
</div>
<div class='rotation-turn'>
<div class='rotation-item'>
<div class="rotation-animat">
<img src="img/img1.png"/>
</div>
</div>
</div>
<div class="rotation-animat">
<img src="img/img3.png"/>
</div>
radius:
类型:Number;
默认值:200;
是否必选:false;
功能:大圆半径;
focusindex:
类型:Number;
默认值:1;
是否必选:false;
功能:焦点图位置,位置排列规则是按第一象限到第四象限顺时针的方向算起
speed:
类型:Number;
默认值:1000;
是否必选:false;
功能:旋转速率,单位(毫秒)
speed:
类型:Number;
默认值:1000;
是否必选:false;
功能:旋转速率,单位(毫秒)
callback:
类型:Function;
Function有两个两个参数:ele(触发事件的节点对象);index(触发事件的节点对象下标);this指向Rotation对象
是否必选:false;
功能:触发旋转时的回调函数
activeSlide:
功能:获取当前焦点图dom节点的下标
init(a):
功能:初始化Rotation;
参数a:
类型:Boole;
是否必选:false;
使用:当动态添加元素后,初始化Rotation时,传true;
其他为false;
selectedMod(a,b):
功能:动态选中指定下标的元素;
参数a:
类型:Number;
是否必选:true;
使用:需要选中的元素的下标;
参数b:
类型:Boole;
是否必选:false;
默认值:false;
使用:是否触发callback;true触发;false不触发;
destroy(a):
功能:销毁Rotation;
参数a:
类型:Boole;
是否必选:false;
默认值:true;
使用:
true: 彻底销毁Rotation对象,释放内存
false:只是清除绑定的事件,可通过init恢复
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。