当前位置:jQuery学习 > jQuery > jQuery 实现图片轮播

jQuery 实现图片轮播

时间:2010-12-10QQ群:116983258

jQuery 图片轮播效果已经不是什么新鲜的事物,今天简单的使用了jQuery自己试验了一下jQuery 图片轮播效果。首先,看看最终的jQuery图片轮播效果图,如下:

jQuery图片轮播

首先,我们看看显示图片大图的HTML标记:

<div class="main">
    <img src="" alt="" />
    <div class="desc">
        <div class="block">
            <h2>标题</h2>
            <p>描述</p>
        </div>
    </div>
</div>

接下来看看右侧预览图的HTML标记:

<div class="thumb">
    <ul>
        <li>
            <a href=""><img src="" alt="" /></a>
            <div class="block">
                <h2>标题</h2>
                <p>描述</p>
            </div>
        </li>
    </ul>
</div>

完整的CSS样式在这里不给出了,最终的目的是实现如图所示的布局效果。下边,我们看看jQuery 实现图片轮播的代码,程序开始,我们使用jQuery动画设置了opacity(不透明度)。这样做就是为了兼容各种浏览器。因为在IE下不识别opacity,而jQuery里做了相应的处理,使得这种写法在IE下显示正常。如下:

$(".main .block").animate({ opacity: 0.8 }, 1);

点击右侧缩略图时,改变图片的路径,进行显示,如下:

$(".thumb ul li").click(function () {
    var alt = $(this).find("img").attr("alt");
    var href = $(this).find("a").attr("href");
    //保存描述内容
    var desc = $(this).find(".block").html();

    $(".main img").fadeOut(100, function () {   
        //设置新的href和alt
        $(this).attr({ src: href, alt: alt })
                    .fadeIn(500);
    });
                
    $(".main .block").html(desc);
    return false;
});

这样就简单的使用jQuery实现了图片轮播的效果,当然,本篇只是一个简单的实现过程,仅供学习jQuery的初学者参考,更好、更丰富的效果大家可以继续研究实现。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-image-rorator.html

所有话题