使用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
- 前言
- js封装和作用域
- 封装html的select标签的js操作
- js正则表达式的使用
- 使用闭包对setTimeout进行简单封装
- js中如何复制一个对象,如何获取所有属性和属性对应的值
- js中如何把字符串转化为对象
- js操作iframe兼容各种浏览器
- js模板方法的思路及实现
- 在js中如何实现方法重载?以及函数的参数问题
- 单纯的html页面如何提交,传递参数,以及对身份的验证
- ajax如何调试
- js综合应用简单的表格统计
- js格式化货币数据
- js综合应用:表格的四则运算
- 如何在浏览器中打开PDF文件并实现预览的思路与代码
- js实现幻灯片效果
- js实现幻灯片效果二
- jquery-easyui必填项隐藏问题的处理方案
- jquery-easyui隐藏可用不可用的问题的处理方案
- js变量作用域--变量提升