jquery简单图像幻灯片教程

在哪里可以找到一个简单的jquery图像幻灯片教程从初学者(无插件),没有左和右导航按钮?

谢谢。

解决方法

这是我在网上找到的最简单的例子。
http://jonraasch.com/blog/a-simple-jquery-slideshow

总结例子,这是你需要做一个幻灯片

HTML:

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

位置绝对用于将每个图像放在另一个上。

CSS

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

具有class =“active”的图像将出现在其他图像上,class = active属性将随着以下Jquery代码而更改。

<script>
    function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');

        $active.removeClass('active');
    }

    $(function() {
        setInterval( "slideSwitch()",5000 );
    });
</script>

如果你想进一步与幻灯片我建议你看看上面的链接(看到动画oppacity的变化 – 2n示例)或其他更复杂的幻灯片教程。

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...