当前位置:首页 >> 网络编程

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="/UploadFiles/2021-04-02/HT-400hPa-20.png"><li class="" style="float: left;"><a ><img title="" alt="500hPa" src=" /HT-500hPa-20.png"><li class="current-li" style="float: left;"><a ><img title="" alt="700hPa" src="/UploadFiles/2021-04-02/HT-700hPa-20.png"><li class="" style="float: left;"><a ><img title="" alt="850hPa" src=" /HT-850hPa-20.png"><li class="" style="float: left;"><a ><img title="" alt="1000hPa" src="/UploadFiles/2021-04-02/HT-1000hPa-20.png"></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