jQuery图片切换展示插件slidy_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java
jQuery Slidy - A Transition Plugin (current version: 0.1)
jQuery Slidy is a plugin that generates a customizable transitions automatically.
With default options:

$('#default').slidy();

<div id="default">
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
</div>
With effect transition, pause animation and custom cursor:


- The types are: 'normal', 'fade' and 'slide'.

$('#default').slidy({
    animation:  'fade',
    cursor:     'wait',
    pause:      true
});

<div id="default">
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
</div>
With menu, custom children elements and time and speed control:




- If the option 'children' was an element <a/>, then the menu will takes the value of "href" as a link;
- Otherwise the "title" attribute will be takes.


$('#menu').slidy({
    animation:  'slide',
    children:   'a',
    menu:       true,
    pause:      true,
    speed:      400,
    time:       4000
});

<div id="menu">
    <a href="#"><img src="img/image-1.jpg" title="Nature"/></a>
    <a href="#"><img src="img/image-2.jpg" title="Animals"/></a>
    <a href="#"><img src="img/image-3.jpg" title="Clime"/></a>
</div>

With a group of elements:
$('.group').slidy({
    animation:  'fade',
    height:     97,
    width:      240
});

<div class="group">
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
</div>

<div class="group">
    <img src="image-2.jpg"/>
    <img src="image-3.jpg"/>
    <img src="image-1.jpg"/>
</div>

<div class="group">
    <img src="image-3.jpg"/>
    <img src="image-1.jpg"/>
    <img src="image-2.jpg"/>
</div>
Default options:
children:     'img'
The element in which the transition will be done.
cursor:       'default'
The type of cursor that will be displayed when it stops over the banner.
height:       200
Height in pixel of the image banner.
menu:         false
Created automatically a menu.
pause:        false
Stop the transition when the mouse over the banner.
speed:        600
Duration in milliseconds of transition animation effect.
target:       ''
Type of opening the link in the menu and the banner.
time:         3600
Duration in milliseconds of transition of the banners.
animation:    'normal'
Type of the animation effect. ['normal', 'fade' or 'slide']
width:        500
Width in pixel of the image banner.
下载代码说明
X关闭

jQuery插件slidy实现图片动态切换、动态选择等效果

jQuery图片切换展示插件slidy,通过slidy插件可以很容易的实现图片动态切换、动态选择等效果,基本上只需要一句代码就可以让多张图片轮动起来,经测试效果还不错,感兴趣的你学习下哦。

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。