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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
微信小程序学习之自定义滚动弹窗
Dec 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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
详解React中合并单元格的正确写法
2019/01/08 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
js实现简单的倒计时
2021/01/28 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python3序列化与反序列化用法实例
2015/05/26 Python
win与linux系统中python requests 安装
2016/12/04 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
业务助理岗位职责
2013/11/18 职场文书
2014年班级工作总结
2014/11/14 职场文书
食品药品安全责任书
2015/05/11 职场文书
海弦WR-800F
2022/04/05 无线电