成都网站建设设计

将想法与焦点和您一起共享

jquery图片列表,jquery图片效果

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

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

城关网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作,到程序开发,运营维护。创新互联成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联

效果图

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;

}

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

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

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

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

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


分享文章:jquery图片列表,jquery图片效果
路径分享:http://chengdu.cdxwcx.cn/article/dsdppos.html