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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
js实现左右轮播图
Jan 09 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
原生js实现无缝轮播图效果
Jan 28 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue中的scope使用详解
2017/10/29 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
python3+PyQt5自定义视图详解
2018/04/24 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
新电JAVA笔试题目
2014/08/31 面试题
劳模事迹材料范文
2014/12/24 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang