问题描述
- 【菜鸟问题】两组轮播JS代码有冲突，问题很多！求高手帮忙解决
-
上图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
上图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代码中能不能加入触屏代码？就是手机浏览时可以通过触屏来滑动轮播，最好是有那种惯性的效果！
解决方案
最近也在学js,还是有一些难度的，虽然帮不上什么忙，但还是想说一声：加油吧，少年！
解决方案二：
用js怎样实现跨域问题