jcarousel幻灯片

Question

我正在使用jquery jcarousel为我的图像滑块，但遇到问题。问题是每当我点击特定的图像滑块图像是看不到的。我的意思是主图像没有变化。任何帮助是受欢迎的。我已经包含了所有jquery和css和脚本。 代码：

<?php 
        if(!empty($detailArr)) 
        { 
         foreach($detailArr as $models) 
         { 
         ?> 
         <h1><?php echo $models['model_name'];?></h1> 

         <div class="model_info"> 
          <div id="slideshow-main"> 
           <ul> 
            <li class="<?php echo $models['gallery_id'];?> active"> 
             <a href="#"> 
             <img src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="410" height="290" alt="" /> 
             </a> 
            </li> 
           </ul> 
          </div> 


          <div id="slideshow-carousel"> 
           <ul id="carousel" class="jcarousel jcarousel-skin-tango"> 
            <?php 
             if(!empty($slideshowArr)) 
              { 
               foreach($slideshowArr as $models) 
               { 
            ?> 
            <li> 
             <a href="<?php echo base_url().$models['model_url']."/".$models['gallery_id'];?>" rel="<?php echo $models['gallery_id'];?>"> 
              <img src="<?php echo base_url();?>images/gallery/large/<?php echo $models['gallery_image'];?>" width="129px" height="95px" alt="#"/> 
             </a> 
            </li> 
            <?php 
               } 
              } 
            ?> 
           </ul> 
          </div> 

<script type="text/javascript"> 
$(document).ready(function() { 

    //jCarousel Plugin 
    $('#carousel').jcarousel({ 
     vertical: true, //display vertical carousel 
     scroll: 1, //auto scroll 
     auto: 2, //the speed of scrolling 
     wrap: 'last', //go back to top when reach last item 
     initCallback: mycarousel_initCallback //extra called back function 
    }); 

    //Front page Carousel - Initial Setup 
    //set all the item to full opacity 
    $('div#slideshow-carousel a img').css({'opacity': '0.5'}); 

    //readjust the first item to 50% opacity 
    $('div#slideshow-carousel a img:first').css({'opacity': '1.0'}); 

    //append the arrow to the first item 
    $('div#slideshow-carousel li a:first').append('<span class="arrow"></span>') 


    //Add hover and click event to each of the item in the carousel 
    $('div#slideshow-carousel li a').hover(
     function() { 

      //check to make sure the item is not selected 
      if (!$(this).has('span').length) { 
       //reset all the item's opacity to 50% 
       $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'}); 

       //adust the current selected item to full opacity 
       $(this).stop(true, true).children('img').css({'opacity': '1.0'}); 
      }  
     }, 
     function() { 

      //on mouse out, reset all the item back to 50% opacity 
      $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'}); 

      //reactivate the selected item by loop through them and look for the one 
      //that has the span arrow 
      $('div#slideshow-carousel li a').each(function() { 
       //found the span and reset the opacity back to full opacity 
       if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'}); 

      }); 

     } 
    ).click(function() { 

     //remove the span.arrow 
     $('span.arrow').remove(); 

     //append it to the current item  
     $(this).append('<span class="arrow"></span>'); 

     //remove the active class from the slideshow main 
     $('div#slideshow-main li').removeClass('active'); 

     //display the main image by appending active class to it.  
     $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active'); 

     return false; 
    }); 


}); 


//Carousel Tweaking 
function mycarousel_initCallback(carousel) { 

    // Pause autoscrolling if `enter code here`the user moves with the cursor over the clip. 
    // resume otherwise 
    carousel.clip.hover(function() { 
     carousel.stopAuto(); 
    }, function() { 
     carousel.startAuto(); 
    }); 
} 
</script> 

Answer 1

首先，你确定你已经导入了jQuery库？你可以这样检查： $（document）.ready（function（）{ alert（1）; }）;