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")
});
一个页面内两个轮播的话,那下面这些写法都是会冲突的
$(".car ul li")
$(".picimglink")
$("#bigUl img")
重代码看,要实现一个页面两个不冲突,要不把上面类似的这些都改了,两个改成不一样,要不就是重新封装成完善的组件。
如果都懒的弄,找个轮播组件
http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html
回复: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(){
……
})()
之后:
第一个轮播可以用了,而且比之前反应更迅速!
第二个的鼠标动作是可以用的,但是不能自动轮播。
没加上之前是第一个完全不动的,第二个可以正常使用。
您说的我完全不明白,本人比较菜鸟,请指教。
抱歉,最好麻烦您直接帮我修改,或者说得更具体一些。