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 滑入滑出效果实现代码
Mar 27 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JavaScript的继承实现小结
May 07 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
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 session会话的安全性分析
2011/09/08 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
go和python变量赋值遇到的一个问题
2017/08/31 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python Grid使用和布局详解
2018/06/30 Python
python实现多人聊天室
2020/03/31 Python
python看某个模块的版本方法
2018/10/16 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
怎样声明子类
2013/07/02 面试题
IBatis持久层技术
2016/07/18 面试题
药学专业大学生自荐信
2013/09/28 职场文书
事业单位接收函
2014/01/10 职场文书
校运会入场式解说词
2014/02/10 职场文书
班训口号大全
2014/06/18 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
创卫工作总结2015
2015/04/22 职场文书
学生病假条怎么写
2015/08/17 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
优秀创业计划书分享
2019/07/19 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL