十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
图片大小自适应要用到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;
}
哦哦,亲这个是jquery的功能,一般叫做轮播图或幻灯片,你可以百度jquery轮播图或幻灯片,找到很多提供jquery调用的网站,使用上特别简单,使用调用js文件,然后写入调用代码,只要遵循调用规范即可。你的html代码已经写好,就剩下调用的事情了。
应该是那个autoscroll({interval: 8000});这个参数返回的问题,你这里表面的意思自动滚动的间隔为8000毫秒,
自动滚动和size没关系,哪里只是表明你要显示多少个图片的参数吧!