Question

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

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

此

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

到此：

<li class="active"><img src="abc.jpg" alt="" /></li>
<li><img src="ddd.jpg" alt="" /></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;
    });
};

Answer 1

var autoScrollerTimer = null;
var autoScrollerTimerTwo = null;
function autoChangeImage() {
    autoScrollerTimer = setTimeout(function(){
        $("#magazin_sldwr li.active")
            .removeClass('active')
            .nextThumb()
            .addClass('active')
            .find('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;
    });
};

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{border:0;outline:none;margin:0;padding:0;}
body{height:100%;background:#fff;color:#1f1f1f;font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Verdana,sans-serif;font-size:13px;padding:7px 0;}

#magazin_sldwr {width: 400px; margin: 0 auto; float:left;}
#magazin_sldwr ul {padding-left: 10px; ist-style:none; float:left;}
#magazin_sldwr li {display: inline; margin-right: 1px; float:left;}
#magazin_sldwr #mainm-img {background: url(bg_img.png) no-repeat 0 0; padding: 6px; width:400px; height:240px; }
#magazin_sldwr li img {
  width:40px;
  height:40px;
  float:left;
}
#magazin_sldwr ul li:hover img{
	border:1px solid blue;
	}

#magazin_sldwr2 {width: 400px; margin: 0 auto; float:left;}
#magazin_sldwr2 ul {padding-left: 10px; ist-style:none; float:left;}
#magazin_sldwr2 li {display: inline; margin-right: 1px; float:left;}
#magazin_sldwr2 #mainm-img2 {background: url(bg_img.png) no-repeat 0 0; padding: 6px; width:400px; height:240px; }
#magazin_sldwr2 li img {
  width:40px;
  height:40px;
  float:left;
}
#magazin_sldwr2 ul li:hover img{
	border:1px solid blue;
}
.title {
    position:absolute;top:20px;left:20px;background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
	<div id="magazin_sldwr">
    <a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" id="mainm-img" /></a>
	<ul>
    <li class="active"><a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></a></li>
	  <li><a href=""><img src="http://p1.pichost.me/640/20/1426650.jpg" alt="fdsafadsff" /></a></li>
	  <li><a href=""><img src="http://p1.pichost.me/640/16/1386887.jpg" alt="fdassfasf" /></a></li>
	  <li><a href=""><img src="http://p1.pichost.me/640/14/1371215.jpg" alt="fdsaeefasf" /></a></li>
	  <li><a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="fds22333afasf" /></a></li>
	  <li><a href=""><img src="http://p1.pichost.me/640/14/1372034.jpg" alt="fds5566afasf" /></a></li>
    </ul>
  </div>
  </div>
    
    <div class="wrap">
	<div id="magazin_sldwr2">
	<img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" id="mainm-img2" />
	<ul>
	  <li class="active"><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></li>
	  <li><img src="http://p1.pichost.me/640/20/1426650.jpg" alt="fdsdf" /></li>
	  <li><img src="http://p1.pichost.me/640/16/1386887.jpg" alt="" /></li>
	  <li><img src="http://p1.pichost.me/640/14/1371215.jpg" alt="" /></li>
	  <li><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></li>
	  <li><img src="http://p1.pichost.me/640/14/1372034.jpg" alt="" /></li>
	</ul>
</div
  </div>

改变

$("#magazin_sldwr li.active") .removeClass('active') .nextThumb() .addClass('active') .children('img') .trigger('mouseenter'); 到

$("#magazin_sldwr li.active") .removeClass('active') .nextThumb() .addClass('active') .find('img') .trigger('mouseenter');

或

$("#magazin_sldwr li.active") .removeClass('active') .nextThumb() .addClass('active') .children('a') .children('img') .trigger('mouseenter');

find（）搜索子项并获取匹配的所有元素。孩子们一次下降到一个dom水平，所以需要成为一个img

见：
http://api.jquery.com/find/
http://api.jquery.com/children/

Answer 2

看看你的构造：孩子们只在DOM树中向下移动一层，所以它不会找到img-tag，因为之前有一个标签。尝试通过＆＃34; a＆gt; img＆＃34;

选择img

http://api.jquery.com/children/

所以你的选择应该是两次使用孩子还是找（＆＃34; a＆gt; img＆＃34;）

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

2 个答案: