2 qq 28613593 qq_28613593 于 2015.06.02 18:07 提问

【菜鸟问题】两组轮播JS代码有冲突,问题很多!求高手帮忙解决

图片轮播一共三组图片循环播放,每组两张,背景图宽度1920px 滑动图宽1260px
上图JS代码如下:
[code=javascript]
//首页顶部轮播
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, //将滑动图移动到左边0用时500
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, //将滑动图移动到左边100%用时500
function() { i++;
if (i > 2) i = 0;
$(".car ul li").eq(i).fadeIn(500).siblings().fadeOut(500) //背景淡入淡出用时500
})
})
})
}
setInterval("jummper()", 6500); //总用时500+5,000+500+500=6,500(淡入淡出算一次)
[/code]
说明:图片轮播一共三组图片循环播放,每组两张,背景图宽度1920px 滑动图宽1260px

说明:在第二段代码的两段加上了(function(){……})()(代码收集余baidu)
上图JS代码如下:
[code=javascript]

//产品轮播
(function(){
$(".picimglink").css("text-decoration", "none");
$(".picimglink").bind({
mouseenter: function() {
$(this).children("span").animate({ bottom: "0"}, 500)}, //将描述框弹出距下0用时500
mouseleave: function() {
$(this).children("span").clearQueue().animate({ bottom: "-48px"}, 500)} //将描述框退出距下-48px用时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); //计时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"},2000) //鼠标动作-指定一组图片滑动用时600
},
function() {
if (_focus_lock == false) {
_focus_dsq = setInterval("autoExecAnimate()", 5000); //计时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()", 5000); //计时6000开始下一组图片
_focus_lock = true
}
});
$(".pic-list2 li").hover(function() {
$(this).addClass("hover").siblings().removeClass("hover")},
function() {
$(this).removeClass("hover")
});
})()
[/code]
说明:
在第二段代码的两段加上了
(function(){
……
})()
(代码收集余baidu)

PS:
第一个轮播可以用了,而且比之前反应更迅速!
第二个轮播所有关于鼠标动作是可以用的,但是不能自动轮播。
没加上之前是第一个完全不动的,第二个可以正常使用(包括鼠标动作和自动轮播)。

问题:
1、请告诉帮忙指出上面两段代码为何会有冲突?(具体一点!我是菜鸟)

2、是否可以修改JS代码和HTML对应的代码来解决冲突问题?(如果可以,请指出!我是……)如果能直接帮我修改好JS的话,不胜感激!

3、在第二段轮播JS代码中能不能加入触屏代码?就是手机浏览时可以通过触屏来滑动轮播,最好是有那种惯性的效果!

2个回答

qq_24724387
qq_24724387   2015.06.02 20:57

最近也在学js,还是有一些难度的,虽然帮不上什么忙,但还是想说一声:加油吧,少年!

qq_28613593
qq_28613593 谢谢,一起加油
2 年多之前 回复
qq_31695217
qq_31695217   2015.10.26 16:12

用js怎样实现跨域问题

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!