当前位置:主页 > jquery插件 > 轮播图 >

EASY SLIDER-滑动幻灯片插件

栏目分类:轮播图   模板编号:JQ00003    发布日期:2017-01-13   来源:网络   浏览次数:次     在线预览
插件描述:Easy Slider可以为我们构建一个滑动幻灯片

使用步骤

1、引入以下的js和css文件

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>

2、在head标签中加入以下js代码

$("#slider").easySlider({auto: true, continuous: true
});

3、在body标签中加入以下格式的html代码

<div id="slider">
  <ul>
    <li><a href="http://www.zybox.cc/"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://www.zybox.cc/"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://www.zybox.cc/"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://www.zybox.cc/"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://www.zybox.cc/"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
  </ul>
</div><br>

参数配置

参数名 参数说明 参数取值 默认值
prevId “上一张”按钮的ID ID字符串 
prevText “上一张”按钮的文字 字符串 
nextId “下一张”按钮的ID ID字符串 
nextText “下一张”按钮的文字 字符串 
controlsShow 是否显示控制条 true或false 
controlsBefore 如果您想添加一些额外的标记来获得更多的控制按钮你可以通过使用这些参数 标记 
controlsAfter 如果您想添加一些额外的标记来获得更多的控制按钮你可以通过使用这些参数 标记 
controlsFade 如果设置为false,当幻灯片到达末尾的时候将会使按钮失效 true或false true
firstId “第一张”按钮的ID ID字符串 
firstText “第一张”按钮的文字 字符串 
firstShow 是否显示回到第一张按钮 true或false 
lastId “最后一张”按钮的ID ID字符串 
lastText “最后一张”按钮的文字 字符串 
lastShow 是否显示回到最后一张按钮 true或false 
vertical 是否垂直滚动 true或false false
speed 幻灯片播放毫秒速度 整数 
auto 是否自动播放 true或false true
pause 如果将auto设为true,表示幻灯片切换间隔毫秒 整数 
continuous 是否连续播放 ture或false 
numeric 是否显示数字导航代替上一页/下一页导航 ture或false 

numericId 数字导航的ID ID字符串


在线演示 立即下载
打赏本站
云盘密码:pdig
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载