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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue-router 中 meta的用法详解
Nov 01 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
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
JS版网站风格切换实例代码
2008/10/06 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python 公共方法汇总解析
2019/09/16 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
学校消防安全制度
2014/01/30 职场文书
签约仪式主持词
2014/03/19 职场文书
创先争优演讲稿
2014/09/15 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
民事上诉状范文
2015/05/22 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
《检阅》教学反思
2016/02/22 职场文书
Golang 入门 之url 包
2022/05/04 Golang