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://ybzwz.com/article/dsdppos.html