直接上jquery代码:
<body>
<div id="pics0">
<img src="upload_files/Img320833552.jpg" />
<img src="upload_files/Img320833554.jpg" />
<img src="upload_files/Img320833556.jpg" />
</div>
<div id="pics1">
<img src="upload_files/Img320833552.jpg" />
<img src="upload_files/Img320833554.jpg" />
</div>
<script>
var imglength = [];
var pic = [];
var viewindex = [];
for (var i = 0; i < $('[id^=pics]').length; i++) {
pic[i] = 'pics' + i;
viewindex[i] = 0;
}
$(function () {
for (var i = 0; i < pic.length; i++) {
imglength[i] = $('#' + pic[i] + '>img').length;
for (var j = 1; j < imglength[i]; j++) {
$('#' + pic[i] + '>img').eq(j).css('display', 'none');
}
}
setInterval('changeimg()', 5000);
})
function changeimg() {
for (var j = 0; j < pic.length; j++) {
var tmp = pic[j].replace('pics', '');
var imgsize = $('#' + pic[j] + '>img').length;
viewindex[tmp]++;
if (viewindex[tmp] >= imgsize) {
viewindex[tmp] = 0;
}
if (imgsize <= 1) {//如果图片小于2张,图片不切换 return; }
for (var i = 0; i < imgsize; i++) {
$('#' + pic[j] + '>img').eq(i).css('display', 'none');
}
$('#' + pic[j] + '>img').eq(viewindex[tmp]).fadeIn(500);
}
}
</script>
</body>
图片可以在服务器端动态输出,div的id最好是相同字母+自增数字。图片不限制张数,每组的图片张数也可以不相同。
样式控制每组图片的容器大小
div{400px; height:400px; overflow:hidden}