외부 컨트롤이있는 jcarousel ... 미리보기 이미지

외부 컨트롤 (아래)을 이미지로 사용하고 싶습니다. 그러나 숫자를 제외하고는 (아래의 순서대로) 작동하는 것으로 보입니다.외부 컨트롤이있는 jcarousel ... 미리보기 이미지

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
<title>jCarousel Examples</title> 
<link href="../style.css" rel="stylesheet" type="text/css" /> 
<!-- 
    jQuery library 
--> 
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> 
<!-- 
    jCarousel library 
--> 
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script> 
<!-- 
    jCarousel skin stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> 

<script type="text/javascript"> 

function mycarousel_initCallback(carousel) 
{ 
    // Disable autoscrolling if the user clicks the prev or next button. 
    carousel.buttonNext.bind('click', function() { 
     carousel.startAuto(0); 
    }); 

    carousel.buttonPrev.bind('click', function() { 
     carousel.startAuto(0); 
    }); 

    // Pause autoscrolling if the user moves with the cursor over the clip. 
    carousel.clip.hover(function() { 
     carousel.stopAuto(); 
    }, function() { 
     carousel.startAuto(); 
    }); 
}; 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     auto: 2, 
     wrap: 'last', 
     initCallback: mycarousel_initCallback 
    }); 
}); 

</script> 

</head> 
<body> 
<div id="wrap"> 
    <h1>jCarousel</h1> 
    <h2>Riding carousels with jQuery</h2> 

    <h3>Carousel with autoscrolling</h3> 
    <p> 
    Autoscrolling is enabled and the interval is set to <code>2</code> seconds. 
    Autoscrolling pauses when the user moves the cursor over the images and stops 
    when the user clicks the next or prev button. <code>wrap</code> is set to 
    <code>&quot;last&quot;</code>. 
    </p> 

    <ul id="mycarousel" class="jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 

    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
    </ul> 

</div> 
</body> 
</html>

출처

2010-07-23 steve

http://www.benjamingaw.com/website/blog/jcarousel-external-linking/ –

위의 대답은 제가 오히려 '1'보다 '0'으로 외부 제어 시작 번호를 필요로 비슷한 문제를 해결할 수있었습니다. 페이지의 인용 된 코드는 함수를 닫지 않는다는 점에서 구문 오류가 있습니다. 해야한다 :

function mycarousel_initCallback(carousel) { 
    jQuery('.jcarousel-control a').bind('click', function() { 
     var index = $(this).attr("id").split("_"); 
     carousel.scroll(jQuery.jcarousel.intval(index[1])); 
     //carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); 
     $(".jcarousel-control a").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); 
     return false; 
    }); 
    jQuery('.jcarousel-scroll select').bind('change', function() { 
     carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); 
     return false; 
    }); // example ends here 
}; // should end here

출처

2012-01-11 09:59:53 user1142886

외부 컨트롤이있는 jcarousel ... 미리보기 이미지

답변

관련 문제