Javascript jquery交换滑块不工作宽度链接

我有一个关于交换滑块的问题。我从codepen创建了这个

演示大图左侧的问题链接不会自动更改。因此，如果我改变：

这个

<li class="active"><a href=""><img src="sss.jpg" alt="" /></a></li>
<li><a href=""><img src="fff.jpg" alt="" /></a></li>

对此：

然后图像自动改变。我需要做什么改变与图片链接

我正在使用jquery函数：

var autoScrollerTimer = null;
var autoScrollerTimerTwo = null;
function autoChangeImage() {
    autoScrollerTimer = setTimeout(function(){
        $("#magazin_sldwr li.active")
            .removeClass('active')
            .nextThumb()
            .addClass('active')
            .children('img')
            .trigger('mouseenter');
        autoChangeImage();
    }, 2000);
}
function autoChangeImageTwo() {
    autoScrollerTimerTwo = setTimeout(function(){
        $("#magazin_sldwr2 li.active")
            .removeClass('active')
            .nextThumb()
            .addClass('active')
            .children('img')
            .trigger('mouseenter');
        autoChangeImageTwo();
    }, 3000);
}
$(document).ready(function() {

    var c;
    $("#magazin_sldwr li img").hover(function(){
        c = $(this).attr('alt');
        clearTimeout(autoScrollerTimer);

$(".title").remove(); $(this).parent('li').addClass('active').siblings().removeClass('active');
        $('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', '')).parent().attr('href',$(this).parent().attr('href'),$("#mainm-img").parent().append('<div class="title">' + c + '</div>'));

    }, function(){
        autoChangeImage();
    });
    var imgSwap = [];
     $("#magazin_sldwr li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });


    autoChangeImage();

    $("#magazin_sldwr2 li img").hover(function(){
        clearTimeout(autoScrollerTimerTwo);
        $(this).parent('li').addClass('active').siblings().removeClass('active');
        $('#mainm-img2').attr('src',$(this).attr('src').replace('thumb/', ''));
    }, function(){
        autoChangeImageTwo();
    });
    var imgSwap = [];
     $("#magazin_sldwr2 li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });


    autoChangeImageTwo();

});
$.fn.nextThumb = function(){
    var next = $(this).next('li');
    if (next.length) {
        return next;
    } else {
        return $(this).parent().find('li:first');
    }
};
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
};

var autoScrollerTimer=null；
var autoScrollerTimerTwo=null；
函数autoChangeImage（）{
autoScrollerTimer=setTimeout（函数（）{
$（“#magazin_sldwr li.active”）
.removeClass（'活动'）
.nextThumb（）
.addClass（“活动”）
.儿童（“img”）
.触发器（“鼠标器”）；
自动更改图像（）；
}, 2000);
}
函数autoChangeImageTwo（）{
autoScrollerTimerTwo=setTimeout（函数（）{
$（“#magazin_sldwr2 li.active”）
.removeClass（'活动'）
.nextThumb（）
.addClass（“活动”）
.儿童（“img”）
.触发器（“鼠标器”）；
autoChangeImageTwo（）；
}, 3000);
}
$（文档）.ready（函数（）{
var c；
$（“#magazin_sldwr li img”）.hover（函数（）{
c=$（this.attr（'alt'）；
clearTimeout（autoScrollerTimer）；
$（.title”）.remove（）；$（this.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
$（'mainmimg'）.attr（'src'，$（this）.attr（'src'）.replace（'thumb/'，''）.parent（）.attr（'href'，$（this.parent（）.attr（'href'），$（'mainmimg'）.parent（）.append（'+c+''）；
}，函数（）{
自动更改图像（）；
});
var imgSwap=[]；
$（“#magazin_sldwr li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
自动更改图像（）；
$（“#magazin_sldwr2 li img”）.hover（函数（）{
clearTimeout（autoScrollerTimerTwo）；
$（this）.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
$（'mainm-img2'）.attr（'src'，$（this.attr（'src'））.replace（'thumb/'，''）；
}，函数（）{
autoChangeImageTwo（）；
});
var imgSwap=[]；
$（“#magazin_sldwr2 li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
autoChangeImageTwo（）；
});
$.fn.nextThumb=函数（）{
var next=$（this.next（'li'）；
如果（下一个长度）{
下一步返回；
}否则{
返回$（this.parent（）.find（'li:first'）；
}
};
$.fn.preload=函数（）{
这个。每个（函数（）{
$（'查看您的构造：子对象仅沿DOM树向下移动一级，因此它找不到img标记，因为之前有a标记。请尝试通过“a>img”选择img


因此，您的选择应该是使用children两次或查找（“a>img”）

var autoScrollerTimer=null；
var autoScrollerTimerTwo=null；
函数autoChangeImage（）{
autoScrollerTimer=setTimeout（函数（）{
$（“#magazin_sldwr li.active”）
.removeClass（'活动'）
.nextThumb（）
.addClass（“活动”）
.find（'img'））
.触发器（“鼠标器”）；
自动更改图像（）；
}, 2000);
}
函数autoChangeImageTwo（）{
autoScrollerTimerTwo=setTimeout（函数（）{
$（“#magazin_sldwr2 li.active”）
.removeClass（'活动'）
.nextThumb（）
.addClass（“活动”）
.儿童（“img”）
.触发器（“鼠标器”）；
autoChangeImageTwo（）；
}, 3000);
}
$（文档）.ready（函数（）{
var c；
$（“#magazin_sldwr li img”）.hover（函数（）{
c=$（this.attr（'alt'）；
clearTimeout（autoScrollerTimer）；
$（.title”）.remove（）；$（this.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
$（'mainmimg'）.attr（'src'，$（this）.attr（'src'）.replace（'thumb/'，''）.parent（）.attr（'href'，$（this.parent（）.attr（'href'），$（'mainmimg'）.parent（）.append（'+c+''）；
}，函数（）{
自动更改图像（）；
});
var imgSwap=[]；
$（“#magazin_sldwr li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
自动更改图像（）；
$（“#magazin_sldwr2 li img”）.hover（函数（）{
clearTimeout（autoScrollerTimerTwo）；
$（this）.parent（'li'）.addClass（'active'）.sides（）.removeClass（'active'）；
$（'mainm-img2'）.attr（'src'，$（this.attr（'src'））.replace（'thumb/'，''）；
}，函数（）{
autoChangeImageTwo（）；
});
var imgSwap=[]；
$（“#magazin_sldwr2 li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
autoChangeImageTwo（）；
});
$.fn.nextThumb=函数（）{
var next=$（this.next（'li'）；
如果（下一个长度）{
下一步返回；
}否则{
返回$（this.parent（）.find（'li:first'）；
}
};
$.fn.preload=函数（）{
这个。每个（函数（）{
$('
body、html、div、blockquote、img、label、p、h1、h2、h3、h4、h5、h6、pre、ul、ol、li、dl、dt、dd、form、a、fieldset、input、th、td{边框：0；轮廓：无；边距：0；填充：0；}
正文{高度：100%；背景：fff；颜色：1F；字体系列：“Lucida Sans Unicode”、“Lucida Grande”、Arial、Verdana、Sans serif；字体大小：13px；填充：7px 0；}
#magazin_sldwr{宽度：400px；边距：0自动；浮点：左；}
#magazin_sldwr ul{左填充：10px；ist样式：无；浮点：左；}
#magazin_sldwr li{显示：内联；右边距：1px；浮动：左；}
#magazin_sldwr#main img{背景：url（bg_img.png）不重复0；填充：6px；宽度：400px；高度：240px；}
#李明杂志{
宽度：40px；
高度：40px；
浮动：左；
}
#magazin_sldwr ul li：悬停图像{
边框：1px纯蓝色；
}
#magazin_sldwr2{宽度：400px；边距：0自动；浮点：左；}
#magazin_sldwr2 ul{左填充：10px；ist样式：无；浮点：左；}
#magazin_sldwr2 li{显示：内联；右边距：1px；浮动：左；}
#magazin_sldwr2#
var autoScrollerTimer = null;
var autoScrollerTimerTwo = null;
function autoChangeImage() {
    autoScrollerTimer = setTimeout(function(){
        $("#magazin_sldwr li.active")
            .removeClass('active')
            .nextThumb()
            .addClass('active')
            .children('img')
            .trigger('mouseenter');
        autoChangeImage();
    }, 2000);
}
function autoChangeImageTwo() {
    autoScrollerTimerTwo = setTimeout(function(){
        $("#magazin_sldwr2 li.active")
            .removeClass('active')
            .nextThumb()
            .addClass('active')
            .children('img')
            .trigger('mouseenter');
        autoChangeImageTwo();
    }, 3000);
}
$(document).ready(function() {

    var c;
    $("#magazin_sldwr li img").hover(function(){
        c = $(this).attr('alt');
        clearTimeout(autoScrollerTimer);

$(".title").remove(); $(this).parent('li').addClass('active').siblings().removeClass('active');
        $('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', '')).parent().attr('href',$(this).parent().attr('href'),$("#mainm-img").parent().append('<div class="title">' + c + '</div>'));

    }, function(){
        autoChangeImage();
    });
    var imgSwap = [];
     $("#magazin_sldwr li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });


    autoChangeImage();

    $("#magazin_sldwr2 li img").hover(function(){
        clearTimeout(autoScrollerTimerTwo);
        $(this).parent('li').addClass('active').siblings().removeClass('active');
        $('#mainm-img2').attr('src',$(this).attr('src').replace('thumb/', ''));
    }, function(){
        autoChangeImageTwo();
    });
    var imgSwap = [];
     $("#magazin_sldwr2 li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });


    autoChangeImageTwo();

});
$.fn.nextThumb = function(){
    var next = $(this).next('li');
    if (next.length) {
        return next;
    } else {
        return $(this).parent().find('li:first');
    }
};
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
};