2 qq 28613593 qq_28613593 于 2015.05.30 21:53 提问

两个轮播的js相互干扰,请高手帮忙,谢谢!
 var i = 0;
jummper();
function jummper() {
    $(".car ul li").eq(i).find("img").css("left", "-100%");
    $(".car ul li").eq(i).find("p").css("width", "0%");
    $(".car ul li").eq(i).find("img").animate({
        left: "0"
    },
    500, 
    function() {
        $(".car ul li").eq(i).find("p").animate({
            width: "1260px"
        },
        5000, 
        function() {
            $(".car ul li").eq(i).find("img").animate({
                left: "100%"
            },
            500, 
            function() {
                i++;
                if (i > 2) i = 0;
                $(".car ul li").eq(i).fadeIn(500).siblings().fadeOut(500)
            })
        })
    })
}
setInterval("jummper()", 6500);
/*--------------------------------------------------------------------------*/
$(".picimglink").css("text-decoration", "none");
$(".picimglink").bind({
    mouseenter: function() {
        $(this).children("span").animate({
            bottom: "0px"
        },
        500)
    },
    mouseleave: function() {
        $(this).children("span").clearQueue().animate({
            bottom: "-30px"
        },
        500)
    }
});
var biZhiDelayLoadImg = $("#bigUl img");
var biZhiDelayLoadImgLength = biZhiDelayLoadImg.length;
for (var i = 3; i < biZhiDelayLoadImgLength; i++) {
    var curDelayImg = biZhiDelayLoadImg.eq(i);
    if (curDelayImg.attr("srch")) {
        curDelayImg.attr("src", curDelayImg.attr("srch"));
        curDelayImg.removeAttr("srch")
    }
}
var _focus_num = $("#smallUl > li").length;
var _focus_direction = true;
var _focus_pos = 0;
var _focus_max_length = _focus_num * 720;
var _focus_li_length = 720;
var _focus_dsq = null;
var _focus_lock = true;
function autoExecAnimate() {
    $("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
    var moveLen = _focus_pos * _focus_li_length;
    $("#bigUl").animate({
        left: "-" + moveLen + "px"
    },
    600);
    if (_focus_pos == (_focus_num - 1)) {
        _focus_direction = false
    }
    if (_focus_pos == 0) {
        _focus_direction = true
    }
    if (_focus_direction) {
        _focus_pos++
    } else {
        _focus_pos--
    }
}
_focus_dsq = setInterval("autoExecAnimate()", 6000);
$("#smallUl > li").hover(function() {
    _focus_pos = parseInt($(this).attr("sid"));
    if (_focus_lock) {
        clearInterval(_focus_dsq);
        _focus_lock = false
    }
    $("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
    var moveLen = _focus_pos * _focus_li_length;
    $("#bigUl").stop(true, true).animate({
        left: "-" + moveLen + "px"
    },
    600)
},
function() {
    if (_focus_lock == false) {
        _focus_dsq = setInterval("autoExecAnimate()", 6000);
        _focus_lock = true
    }
});
$("#bigUl").hover(function() {
    if (_focus_lock) {
        clearInterval(_focus_dsq);
        _focus_lock = false
    }
},
function() {
    if (_focus_lock == false) {
        _focus_dsq = setInterval("autoExecAnimate()", 6000);
        _focus_lock = true
    }
});
$(".pic-list2 li").hover(function() {
    $(this).addClass("hover").siblings().removeClass("hover")
},
function() {
    $(this).removeClass("hover")
});

2个回答

danielinbiti
danielinbiti   Ds   Rxr 2015.05.30 22:57
 一个页面内两个轮播的话,那下面这些写法都是会冲突的
 $(".car ul li")
$(".picimglink")
$("#bigUl img")
重代码看,要实现一个页面两个不冲突,要不把上面类似的这些都改了,两个改成不一样,要不就是重新封装成完善的组件。
如果都懒的弄,找个轮播组件
http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html
qq_28613593
qq_28613593   2015.05.31 11:46

回复:danielinbiti

/*------------------**第一段-**-----------------------*/
var i = 0;
jummper();
function jummper() {
$(".car ul li").eq(i).find("img").css("left", "-100%");<!--滑动图片从左边的-100%(图片宽度)处滑出-->
$(".car ul li").eq(i).find("p").css("width", "0%");<!--计时条宽度从0开始-->
$(".car ul li").eq(i).find("img").animate({
left: "0"
},
500, <!--用时500毫秒将滑动图移到距左边为0的地方
function() {
$(".car ul li").eq(i).find("p").animate({
width: "1260px"
},
5000, <!--计时条宽度1260px,用时5000毫秒-->
function() {
$(".car ul li").eq(i).find("img").animate({
left: "100%"
},
500, <!--用时500毫秒将滑动图移到距离左边为100%(图片宽度)的地方-->
function() {
i++;
if (i > 2) i = 0;
$(".car ul li").eq(i).fadeIn(500).siblings().fadeOut(500)<!--背景淡入淡出延时500毫秒-->
})
})
})
}
setInterval("jummper()", 6500);<!--总用时间-->

/*------------------**第二段-**-----------------------*/
(function(){
$(".picimglink").css("text-decoration", "none");
$(".picimglink").bind({
mouseenter: function() {
$(this).children("span").animate({
bottom: "0px"/*描述弹出距离底线的距离*/
},
500)/*描述弹出时间500*/
},
mouseleave: function() {
$(this).children("span").clearQueue().animate({
bottom: "-48px"/*描述退出的位置*/
},
500)/*描述退出时间500*/
}
});
var biZhiDelayLoadImg = $("#bigul img");
var biZhiDelayLoadImgLength = biZhiDelayLoadImg.length;
for (var i = 3; i < biZhiDelayLoadImgLength; i++) {
var curDelayImg = biZhiDelayLoadImg.eq(i);
if (curDelayImg.attr("srch")) {
curDelayImg.attr("src", curDelayImg.attr("srch"));
curDelayImg.removeAttr("srch")
}
}
var _focus_num = $("#smallUl > li").length;
var _focus_direction = true;
var _focus_pos = 0;
var _focus_max_length = _focus_num * 720;
var _focus_li_length = 720;
var _focus_dsq = null;
var _focus_lock = true;
function autoExecAnimate() {
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigul").animate({
left: "-" + moveLen + "px"
},
2000);/*滑到下一组图片所需要的时间600*/
if (_focus_pos == (_focus_num - 1)) {
_focus_direction = false
}
if (_focus_pos == 0) {
_focus_direction = true
}
if (_focus_direction) {
_focus_pos++
} else {
_focus_pos--
}
}
_focus_dsq = setInterval("autoExecAnimate()", 5000);/*轮播图片6秒滑动一次*/
$("#smallUl > li").hover(function() {
_focus_pos = parseInt($(this).attr("sid"));
if (_focus_lock) {
clearInterval(_focus_dsq);
_focus_lock = false
}
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigul").stop(true, true).animate({
left: "-" + moveLen + "px"
},
2000)/*鼠标动作-滑到鼠标指定的一组图片所需要的时间600*/
},
function() {
if (_focus_lock == false) {
_focus_dsq = setInterval("autoExecAnimate()", 5000);/*轮播图片6秒滑动一次*/
_focus_lock = true
}
});
$("#bigul").hover(function() {
if (_focus_lock) {
clearInterval(_focus_dsq);
_focus_lock = false
}
},
function() {
if (_focus_lock == false) {
_focus_dsq = setInterval("autoExecAnimate()", 5000);/*轮播图片6秒滑动一次*/
_focus_lock = true
}
});
$(".pic-list2 li").hover(function() {
$(this).addClass("hover").siblings().removeClass("hover")
},
function() {
$(this).removeClass("hover")
});
})()

在第二段代码的两段加上
(function(){
……
})()
之后:
第一个轮播可以用了,而且比之前反应更迅速!
第二个的鼠标动作是可以用的,但是不能自动轮播。
没加上之前是第一个完全不动的,第二个可以正常使用。

您说的我完全不明白,本人比较菜鸟,请指教。
抱歉,最好麻烦您直接帮我修改,或者说得更具体一些。

Csdn user default icon
上传中...
上传图片
插入图片