当前位置:格晒特效使用说明特效基础使用说明
agilebins.js 是一个基于jQuery运行的永久免费开源特效插件

基础使用设置

将jquery.agilebins-v1.0.3.min.js包含在head标中或位于关闭正文标记之前。

请确保在jquery.agilebins-v1.0.3.min.js之前包含jquery.js

<html>

<head>

<title>demo例子</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.agilebins-v1.0.3.min.js"></script>

</head>

<body>

创建一个div父层,然后在其内部为每个幻灯片创建一个目标元素,并使用css控制其样式

agilebins.js将选定父层元素内的,层标签与样式应用于它们。并按照您的喜好定位。

一定要注意,父层元素和容器元素,必须具有指定的宽度和高度,才能正常工作。

<div class="demo-focus">

<div class="conts">

<ul>

<li><img src="1.jpg" /></li>

<li><img src="2.jpg" /></li>

<li><img src="3.jpg" /></li>

</ul>

</div>

<div class="tabs"><ul></ul></div>

<a class="prev" href="javascript:void(0)"></a>

<a class="next" href="javascript:void(0)"></a>

</div>

调用参数的设置

在你需要使用效果的div父层外,使用调用代码即可实现效果。建议把每个页面的调用代码,统一放在页尾。方便维护管理。

<script type="text/javascript">

$(".demo-focus").agilebins({

autoPlay: true,

effect: "fold",

mainEl: '.conts ul',

mPrev: ".prev",

mNext: ".next",

mainState: '.tabs ul',

autoMainState: true

});

</script>

热门下载
  • agilebins
    PC端万能免费开源插件agilebins

    快速解决网页大部分特效。使用简单,维护方便。无需懂得js代码编写。轻松制作,导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动,选项卡内容切换、手风琴折叠效果等。

  • shapes
    shapes瀑布流自适应布局插件

    对这样的布局大家并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮。国内有众多网站采用瀑布流的布局方式,例如花瓣网、美丽说等等。

  • atouch
    移动端万能特效插件atouch

    atouch是纯javascript制作的移动端,触屏万能特效插件。针对手机、平板等移动终端。 能实现触屏焦点图、触屏Tab切换、触屏多图切换、触屏导航菜单等效果。

返回顶部