两个轮播的js相互干扰，请高手帮忙，谢谢！

问题描述

两个轮播的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")
});

解决方案

 一个页面内两个轮播的话，那下面这些写法都是会冲突的
 $(".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(){
……
})()
之后：
第一个轮播可以用了，而且比之前反应更迅速！
第二个的鼠标动作是可以用的，但是不能自动轮播。
没加上之前是第一个完全不动的，第二个可以正常使用。

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

时间： 2024-08-30 17:46:51

两个轮播的js相互干扰，请高手帮忙，谢谢！的相关文章

vs连接数据库出未知异常,请高手帮忙,谢谢

问题描述 有人知道这个异常出错的原因吗?或者指路指点个方向,该百度什么关键字可以搜索到要的结果.谢谢!! 解决方案 解决方案二:看看这个吧,或者从这里面找关键字搜索吧解决方案三:是不是110这台机子没有提供dev这样的SQL用户?解决方案四:为什么要这样连?用代码连不行么?解决方案五:是不是账号密码有问题?或者用SA账号吧..解决方案六:引用1楼wpfLove的回复: 看看这个吧,或者从这里面找关键字搜索吧 英文的看不懂~~~不懂怎么搜索,谢谢你的回答啊解决方案七:引用2楼wind_cloud2

js调试-菜鸟请高手帮忙看看两个JS文件为什么会冲突

问题描述 菜鸟请高手帮忙看看两个JS文件为什么会冲突 文件一: var ddsmoothmenu={ //Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs): arrowimages: {down:['downarrowclass', 'images/down.gif', 10], right:['rightarrowclass',

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

问题描述 [菜鸟问题]两组轮播JS代码有冲突,问题很多!求高手帮忙解决 上图JS代码如下: [code=javascript] //首页顶部轮播 var i = 0; jummper(); function jummper() { $(".car ul li").eq(i).find("img").css("left", "-100%"); //滑动图在左边-100%准备 $(".car ul li").e

Asp.Net 1.1 中如何在自定义控件中加入js脚本 请高手指点 加分!!!!!!!!

问题描述 Asp.Net1.1中如何在自定义控件中加入js脚本请高手指点加分!!!!!!!! 解决方案 解决方案二:用this.Page.RegisterClientScriptBlock就可以.解决方案三:我想引用一个js文件this.Page.RegisterClientScriptBlock不是写脚本吗?解决方案四:this.Page.RegisterClientScriptBlock("myscript","regscript.js");这样直接引用一个js

android-要同时运行两个模拟器怎么弄啊？请高手们指教。。。。

问题描述 要同时运行两个模拟器怎么弄啊?请高手们指教.... 要模仿一个行为:一个手机向另外一个手机发送信号,另外一个手机接收到这个信号,要同时运行两个模拟器,但是,能打开两个模拟器,却不能同时运行两个,只有一个能够运行,请教大家,这个问题怎么解决啊? 解决方案 下载两个手机型号,可以同时运行,用genymotion 解决方案二: 一般可以同时运行的,只要模拟器的配置参数不同就没问题.楼上正解 解决方案三: 启动两个模拟器就行了啊. 你打开两个模拟器之后,应该可以在DDMS中看到. 运行的时候会

html5-急求教！请JS或H5高手帮忙看个代码，代码中哪段是控制（图片）最大播放数量的？

问题描述 急求教!请JS或H5高手帮忙看个代码,代码中哪段是控制(图片)最大播放数量的? 我是新手,看不太明白,求教... 目前的代码是有10张图片顺序播放,但是我希望只播放3张,也就是最大播放数量控制在3以内. 非常感谢!!! (function(){ var now = { row:1, col:1 }, last = { row:0, col:0}; const towards = { up:1, right:2, down:3, left:4}; var isAnimating = fa

指针-怎么改啊，请高手帮忙

问题描述 怎么改啊,请高手帮忙 if(root->parent==1) parent在头文件中是指针的类型 请大家帮忙教我一下,我刚开始学C++ 解决方案 请高手们帮忙!!!!求助!!高手们请快来帮忙啊请flash高手帮忙 解决方案二: 指针咋可能等于1嘛~ 你需要先看一下C++的基本语法啦~ 先从变量字符串之类的开始看起吧,然后再学执行结构,指针,数组,结构体和类. 慢慢来,不着急的. 解决方案三: 指针指向的是地址,不是具体的值 解决方案四: 楼上说的很细了,主要是你必须要自己会查错误 解决

2种C#增的写法！！请高手帮忙看看！

问题描述 第1种!!privatevoidForm1_Load(objectsender,System.EventArgse){objSqlConnection=newSqlConnection("Server=127.0.0.1;Database=jinxubin;uid=sa;pwd=123");objSqlDataAdapter=newSqlDataAdapter("select*frombook",objSqlConnection);objSqlDataAd

串口通信-请高手帮忙回答，在龚建伟老师的串口调试中遇到了Serial串口类的问题

问题描述 请高手帮忙回答,在龚建伟老师的串口调试中遇到了Serial串口类的问题 点击打开串口按钮时,就会弹出以上图片的错误, 代码如下 // SerialPortTestDlg.h : header file // #include"SerialPort.h" #if !defined(AFX_SERIALPORTTESTDLG_H__37F6643D_1905_4655_883E_24AD7F141ED0__INCLUDED_) #define AFX_SERIALPORTTEST