jquery图片列表,jquery图片效果

高分求助jquery如何实现下面图片里的效果

图片大小自适应要用到imgLiquid-min.js插件

效果图

demo

html代码

table

    tr class='small'

        tdimg src='

        tdimg src='

        tdimg src='

        tdimg src='

    /tr

    tr class='small'

        tdimg src='

        tdimg src='

        tdimg src='

        tdimg src='

    /tr

    tr class='small'

        tdimg src='

        tdimg src='

        td/td

        td/td

    /tr

/table

js代码

$(document).ready(function() {

    $(".small td").imgLiquid();//自适应大小

    $(".small td").click(function () {

        $("td").removeClass("nowat");

        $(".big").remove();

        $(this).addClass("nowat");

        $(this).parent("tr").after('tr class="big"td colspan=4img src="'+$(this).find("img").attr("src")+'" //td/tr');

    });

    $("body").on("click", ".big td", function () {

        $(this).parent("tr").remove();

    });

 });

css代码

table {

    margin: 0 auto;

    text-align: center;

    background-color: #000000;

    border-collapse: separate;

    border-spacing: 10px ;

}

tr.small {}

tr.small td {

    height: 65px;

    width: 65px;

    background-color: #008b47;

}

.nowat {

    border: solid 2px #ffffff;

}

tr.big {}

tr.big td {

background-color: #fff;

}

相关问答

Q1: 怎样通过JS把右边展示的图片列表在右侧大图处依次轮播?具体情况如下图，谢谢大神指导

哦哦，亲这个是jquery的功能，一般叫做轮播图或幻灯片，你可以百度jquery轮播图或幻灯片，找到很多提供jquery调用的网站，使用上特别简单，使用调用js文件，然后写入调用代码，只要遵循调用规范即可。你的html代码已经写好，就剩下调用的事情了。

Q2: 关于jquery.tools中的scrollable的图片列表滚动问题

应该是那个autoscroll({interval: 8000});这个参数返回的问题，你这里表面的意思自动滚动的间隔为8000毫秒，

自动滚动和size没关系，哪里只是表明你要显示多少个图片的参数吧！