提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JSjQuery插件 实现 基于 效果 幻灯片
2023-06-13 09:15:07 时间
使用jquery插件jquery.smallslider.js也能实现幻灯片效果。
htm代码如下：
复制代码代码如下:

<divid="flashbox"class="smallslider">
<ulstyle="position:absolute;top:0px;width:3225px;">
<liclass=""style="float:left;"><a><imgtitle=""alt="400hPa"src="/HT-400hPa-20.png"width="645"></a></li>
<liclass=""style="float:left;"><a><imgtitle=""alt="500hPa"src="/HT-500hPa-20.png"width="645"></a></li>
<liclass="current-li"style="float:left;"><a><imgtitle=""alt="700hPa"src="/HT-700hPa-20.png"width="645"></a></li>
<liclass=""style="float:left;"><a><imgtitle=""alt="850hPa"src="/HT-850hPa-20.png"width="645"></a></li>
<liclass=""style="float:left;"><a><imgtitle=""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

相关文章