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

259 阅读 0 评论 171 点赞

我是靠谱客的博主狂野大侠，最近开发中收集的这篇文章主要介绍js实现幻灯片效果(基于jquery插件)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用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