2014-10-20 59 views
0

我有一個關於交換滑塊的問題。我從codepen創建了這個DEMOjquery swap slider not working width鏈接

演示大圖片左側部分的問題鏈接不會自動更改。所以,如果我改變:

<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; 
    }); 
}; 

回答

2

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() { 
 
    
 
\t var c; 
 
\t $("#magazin_sldwr li img").hover(function(){ 
 
     c = $(this).attr('alt'); 
 
     clearTimeout(autoScrollerTimer); 
 
     
 
$(".title").remove(); $(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
\t \t $('#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(); 
 
    }); 
 
\t var imgSwap = []; 
 
\t $("#magazin_sldwr li img").each(function(){ 
 
\t \t imgUrl = this.src.replace('thumb/', ''); 
 
\t \t imgSwap.push(imgUrl); 
 
\t }); 
 
    
 
\t 
 
    autoChangeImage(); 
 
    
 
    \t $("#magazin_sldwr2 li img").hover(function(){ 
 
     clearTimeout(autoScrollerTimerTwo); 
 
     $(this).parent('li').addClass('active').siblings().removeClass('active'); 
 
\t \t $('#mainm-img2').attr('src',$(this).attr('src').replace('thumb/', '')); 
 
    }, function(){ 
 
     autoChangeImageTwo(); 
 
    }); 
 
\t var imgSwap = []; 
 
\t $("#magazin_sldwr2 li img").each(function(){ 
 
\t \t imgUrl = this.src.replace('thumb/', ''); 
 
\t \t imgSwap.push(imgUrl); 
 
\t }); 
 
    
 
\t 
 
    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{ 
 
\t border:1px solid blue; 
 
\t } 
 

 
#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{ 
 
\t 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"> 
 
\t <div id="magazin_sldwr"> 
 
    <a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" id="mainm-img" /></a> 
 
\t <ul> 
 
    <li class="active"><a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></a></li> 
 
\t <li><a href=""><img src="http://p1.pichost.me/640/20/1426650.jpg" alt="fdsafadsff" /></a></li> 
 
\t <li><a href=""><img src="http://p1.pichost.me/640/16/1386887.jpg" alt="fdassfasf" /></a></li> 
 
\t <li><a href=""><img src="http://p1.pichost.me/640/14/1371215.jpg" alt="fdsaeefasf" /></a></li> 
 
\t <li><a href=""><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="fds22333afasf" /></a></li> 
 
\t <li><a href=""><img src="http://p1.pichost.me/640/14/1372034.jpg" alt="fds5566afasf" /></a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="wrap"> 
 
\t <div id="magazin_sldwr2"> 
 
\t <img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" id="mainm-img2" /> 
 
\t <ul> 
 
\t <li class="active"><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></li> 
 
\t <li><img src="http://p1.pichost.me/640/20/1426650.jpg" alt="fdsdf" /></li> 
 
\t <li><img src="http://p1.pichost.me/640/16/1386887.jpg" alt="" /></li> 
 
\t <li><img src="http://p1.pichost.me/640/14/1371215.jpg" alt="" /></li> 
 
\t <li><img src="http://p1.pichost.me/640/14/1372030.jpg" alt="" /></li> 
 
\t <li><img src="http://p1.pichost.me/640/14/1372034.jpg" alt="" /></li> 
 
\t </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/

0

看看你的構造:孩子只行進的單級下調DOM樹,所以它不會找到一個IMG標籤東陽有一個標籤之前。試圖通過 「一> IMG」 選擇IMG

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

那麼你的選擇要麼是使用兩次的兒童或者找到( 「A> IMG」)

+0

@MasreD我仍然斯特雷這一點,但不工作 – innovation 2014-10-20 14:45:23