惆个小怅 2015-06-02 10:07 采纳率: 0%
浏览 2288

【菜鸟问题】两组轮播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 2015-06-02 12:57
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题