您的位置：首页 > Web前端 > JQuery

【原创】jquery实现动态多组图片切换

2011-10-09 18:37 579 查看
直接上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{width:400px; height:400px; overflow:hidden}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航