js实现幻灯片效果(基于jquery插件)

说起幻灯片效果,想必大家都不陌生吧,接下来为大家介绍下使用jquery插件jquery.smallslider.js实现幻灯片效果示例代码,喜欢的朋友可以学习下

使用jquery插件jquery.smallslider.js也能实现幻灯片效果。
htm代码如下:

复制代码 代码如下:


<div>
<ul>
<li><a ><img title="" alt="400hPa" src=" /HT-400hPa-20.png"></a> </li>
<li><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png"></a> </li>
<li><a ><img title="" alt="700hPa" src=" /HT-700hPa-20.png"></a> </li>
<li><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png"></a> </li>
<li><a ><img title="" alt="1000hPa" src=" /HT-1000hPa-20.png"></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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzwxy.html