1.下载JQuery.slideBox和jquery插件,并引用

<link href="css/jquery.slideBox.css" rel="stylesheet" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.slideBox.min.js"></script>

下载链接

2.设置图片的html的div的ID为如下形式

<div id="demo1" class="slideBox">
<ul class="items">
<li><a href="#" title="标题一"><img src="img/1.jpg"></a></li>
<li><a href="#" title="标题二"><img src="img/2.jpg"></a></li>
<li><a href="#" title="标题三"><img src="img/3.jpg"></a></li>
<li><a href="#" title="标题四"><img src="img/4.jpg"></a></li>
<li><a href="#" title="标题五"><img src="img/5.jpg"></a></li>
</ul>
</div>

3.设置JQuery.slideBox的一些属性设置。有三种设置的案例,可以参考.

    <script type="text/javascript">
$(function() {
$('#demo1').slideBox();
$('#demo2').slideBox({
direction: 'top',//left,top#方向
duration: 0.3,//滚动持续时间,单位:秒
easing: 'linear',//swing,linear//滚动特效
delay: 5,//滚动延迟时间,单位:秒
startIndex: 1//初始焦点顺序
});
$('#demo3').slideBox({
duration: 0.3,//滚动持续时间,单位:秒
easing: 'linear',//swing,linear//滚动特效
delay: 5,//滚动延迟时间,单位:秒
hideClickBar: false,//不自动隐藏点选按键
clickBarRadius: 10
});
$('#demo4').slideBox({
hideBottomBar: true//隐藏底栏
});
})
</script>

说明:默认的样式为,左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-只方不圆)5px(以上各项为默认设置值)

使用JQuery.slideBox实现图片滚动效果的更多相关文章

  1. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  2. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  3. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  4. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  5. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  6. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. JQuery slidebox实现图片轮播

    jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...

  8. 【jQuery Demo】图片切换效果整理

    图片的切换效果有很多,比较常见的有水平滚动.垂直滚动.淡入淡出等.我们接下来一一实现这些效果. 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: <div id="conta ...

  9. jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

  1. AtCoder Grand Contest 003 E - Sequential operations on Sequence

    题目传送门:https://agc003.contest.atcoder.jp/tasks/agc003_e 题目大意 一串数,初始为\(1\sim N\),现有\(Q\)个操作,每次操作会把数组长度 ...

  2. 记一次有关spark动态资源分配和消息总线的爬坑经历

    问题: 线上的spark thriftserver运行一段时间以后,ui的executor页面上显示大量的active task,但是从job页面看,并没有任务在跑.此外,由于在yarn mode下, ...

  3. ping localhost出现地址::1

    近期发现本机的localhost不好用了. 症状: 自己本机部署服务器时,浏览器地址栏访问localhost:8080不通: 禁用网络连接,未果: 拔出网线,OK. cmd里ping之,返回结果如下: ...

  4. 原创 Repeater radio 单选和多选混合

    希望高手朋友给我留下美好的意见,在此先感谢您! 前台代码repeater: <script src="../Scripts/jquery-1.9.1.js"></ ...

  5. CF782B The Meeting Place Cannot Be Changed

    题意: The main road in Bytecity is a straight line from south to north. Conveniently, there are coordi ...

  6. 边框圆角值的问题、white-space、word-wrap、margin对布局的影响

    1.边框圆角(border-radius)值的问题 border-radius : 7px 7px 7px 0; 四个值的顺序是左上.右上.右下.左下 2.white-space 规定段落中的文本不换 ...

  7. express搭建平台

    1.nodeJs的安装(npm的安装) nodejs官方下载地址:https://nodejs.org 2.express的安装( $ npm install -g express #全局安装expr ...

  8. [Tunny]Git常用命令与入门

    [黄映焜/Tunny,20140709] Git 仓库就是那个.git 目录,其中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪,从而实现文档的版本控制..g ...

  9. laravel关联用户

    参考文档:模型关联-反向关联 belongsToor 模型层 app/Post.php public function user() { return $this->belongsTo('\Ap ...

  10. jdbc获取数据具体过程

    下面是个最简单的使用jdbc取得数据的应用.在例子之后我将分成4步,分别是①取得连接,②创建PreparedStatement,③设置参数,④执行查询,来分步分析这个过程.除了设置参数那一步之外,其他 ...