js实现幻灯片效果二

使用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实现幻灯片效果二相关推荐

JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
简单的JS幻灯片效果（播放图片） and Tab卡显示、展开、隐藏效果
自己练习JS写了2个简单的效果,如题. 直接上代码,在代码里添加注释,希望能对新学习JavaScript的有帮助,也帮自己强化练习. 1 function getElemByClass(cl ...
js计时器实现页面刷新和幻灯片效果
在网页的特效制作中,经常要用到定时器,比如:间隔一定时间后页面自动跳转,或者间隔一定时间出现某种效果,像网页上的飞雪连天,或者背景颜色的定时改变等等. 若要页面定时跳转,简单的可以在he ...
『HTML5梦幻之旅』-滚动播放的幻灯片效果
很久又没写博客了,一者是因为要上课,平时没有什么零碎的时间研究新东西:二者最近在开发一款塔防游戏,有整块的时间都拿去开发这个项目了.因此最近没有什么好的东西和大家分享.这周末看在游戏快完工的份上,抽出 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
酷毙了！三种风格的全屏幻灯片效果【附源码下载】
今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分 ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
Jquery封装幻灯片效果
前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已!所以今天也写了一个常见的幻灯片效果用Jqu ...

js实现幻灯片效果二

js实现幻灯片效果二相关推荐

最新文章

热门文章