图片滑动切换

搞得这么麻烦...
给所有图片的父级再加上一个元素a，里面所有的图片左浮动，元素a宽度设置为9999px，绝对定位
元素a向左滑动，当滑动效果执行完后，将元素a里面的第一张图append到元素a结尾。

修改你的javascript代码如下$(document).ready(function(e) {
    var $wrapper = $('img');
    var imgs = $wrapper.length;
    for (i = 0; i < imgs; i++) {
        $wrapper.eq(i).css('left', 200 * i + 'px');
    }    function slidepic(imgblock) {
        var container=document.getElementById("imgs");
        var len = imgblock.length;
        for (var i = 0; i < len; i++) {
            imgblock.eq(i).animate({
                left: '-=200'
            },function(){
                if(parseInt($(this).css("left"))<0)
                {
                    $(this).css("left",800+"px");
                    container.appendChild(this);
                }
                // container.appendChild(this);
            });
            // if (imgblock.eq(i).css('left') <= 0)
            // {
            //     console.log(imgblock.eq(i).css('left'));
            //     imgblock.eq(i).css('left', 800); //当<img>的left小于0时，将其设置为800px
            // }
        }
        setTimeout(slidepic(imgblock), 5000);
    }    slidepic($wrapper);
});

把代码改成下面这样也可以
function slidepic(imgblock){
var len = imgblock.length;
for(var i=0; i<len; i++){
imgblock.eq(i).animate({left:'-=200'}, function(){
if(parseInt($(this).css('left'))<0){
$(this).css('left',800);
}
});
}
setTimeout(slidepic(imgblock), 1000);
}
你的代码中的
container.appendChild(this)
在把最前面的<img>放到最后面后，最前面的<img>会被删除
也就是把最前面的<img>移动到最后面
也就是说，.appendChild（）可以对已存在的节点进行移动
是有这样的功能吗？我在w3c的网站上没有看到过这个功能啊？

还有这一句setTimeout(slidepic(imgblock), 5000);
设置的延迟时间根本没用，滑动的速度一直是一样的，你知道怎么解决吗？

把代码改成下面这样也可以
function slidepic(imgblock){
var len = imgblock.length;
for(var i=0; i<len; i++){
imgblock.eq(i).animate({left:'-=200'}, function(){
if(parseInt($(this).css('left'))<0){
$(this).css('left',800);
}
});
}
setTimeout(slidepic(imgblock), 1000);
}
你的代码中的
container.appendChild(this)
在把最前面的<img>放到最后面后，最前面的<img>会被删除
也就是把最前面的<img>移动到最后面
也就是说，.appendChild（）可以对已存在的节点进行移动
是有这样的功能吗？我在w3c的网站上没有看到过这个功能啊？
如果appendChild添加的是dom中已经存在的一个节点那么会将原来的节点移动到新的位置 w3c上并不是什么都说的

还有这一句setTimeout(slidepic(imgblock), 5000);
设置的延迟时间根本没用，滑动的速度一直是一样的，你知道怎么解决吗？
我重写了你的代码如下同时将样式中的img{position:absolute;}删掉$(document).ready(function(e) {
    var $wrapper = $('img');
    var imgs = $wrapper.length;
    // for (i = 0; i < imgs; i++) {
    //     $wrapper.eq(i).css('left', 200 * i + 'px');
    // }    function slidepic(imgblock) {
        var container=document.getElementById("imgs");
        $("#imgs:first").animate({marginLeft: "-200"}, function() {
            var firstImg=$("img:first")[0];
            container.appendChild(firstImg);
            $(this).css("marginLeft",0);
        });

        setTimeout(arguments.callee,2000);
    }    slidepic($wrapper);
});

还有这一句setTimeout(slidepic(imgblock), 5000);
设置的延迟时间根本没用，滑动的速度一直是一样的，你知道怎么解决吗？
我重写了你的代码如下同时将样式中的img{position:absolute;}删掉$(document).ready(function(e) {
    var $wrapper = $('img');
    var imgs = $wrapper.length;
    // for (i = 0; i < imgs; i++) {
    //     $wrapper.eq(i).css('left', 200 * i + 'px');
    // }    function slidepic(imgblock) {
        var container=document.getElementById("imgs");
        $("#imgs:first").animate({marginLeft: "-200"}, function() {
            var firstImg=$("img:first")[0];
            container.appendChild(firstImg);
            $(this).css("marginLeft",0);
        });

        setTimeout(arguments.callee,2000);
    }    slidepic($wrapper);
});

为什么container=document.getElementById("imgs")换成container=$("#imgs")就不行了？
为什么firstImg=$("img:first")[0]这句一定要这样写，而不是firstImg=$("img:first")？

调试易

图片滑动切换

解决方案 »