js实现幻灯片效果(基于jquery插件)


Posted in Javascript onNovember 05, 2013

使用jquery插件jquery.smallslider.js也能实现幻灯片效果。
htm代码如下:

<div id="flashbox" class="smallslider"> 
<ul style="position: absolute; top: 0px; width: 3225px;"> 
<li class="" style="float: left;"><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png" width="645"></a> </li> 
<li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png" width="645"></a> </li> 
<li class="" style="float: left;"><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png" width="645"></a> 
</li></ul> 
</div>

js代码:
$(document).ready(function(){ 
$('#flashbox').smallslider({onImageStop:true, switchEffect:'ease',switchEase: 'easeOutSine',switchPath: 'left', switchMode: 'hover', showText:true, textSwitch:2}); 
});

使用到的脚本,样式jquery-1.7.2.min.js,jquery.smallslider.js,smallslider.css
Javascript 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
javascript使用location.search的示例
Nov 05 #Javascript
jquery按回车提交数据的代码示例
Nov 05 #Javascript
js jq 单击和双击区分示例介绍
Nov 05 #Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 #Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 #Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 #Javascript
js截取字符串的两种方法及区别详解
Nov 05 #Javascript
You might like
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
浅析php学习的路线图
2013/07/10 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
详解Python3 pickle模块用法
2019/09/16 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
企业给企业的表扬信
2014/01/13 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python