Question

我一直在使用jQuery Image Gallery和jCarousel。它一直很好，但问题是，每当我点击缩略图，而不是只改变主图像，周围环境也会改变。我不希望这样。我只想在点击缩略图时更改主图像。而且无论主图像是什么，我都希望它专注于缩略图列表。我应该为此做些什么以及我应该使用哪个事件？感谢您提供的任何帮助。

代码：

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery.jcarousel.css" />
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.jcarousal.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/skin.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/slider.css" />
    <script type="text/javascript">
    $(document).ready(function () {
        //jCarousel Plugin
        $('#carousel').jcarousel({
            vertical: true,
            scroll: 1,
            auto: 2,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });

    //Front page Carousel - Initial Setup
    //$('div#slideshow-carousel a img').css({'opacity': '0.5'});
    //$('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
    //$('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')

    //Combine jCarousel with Image Display
    //*$('div#slideshow-carousel li a').click(function () {
        $('span.arrow').remove();
        $(this).append('<span class="arrow"></span>');
        $('div#slideshow-main li').removeClass('active');
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');
        return false;
    });*/
});

//Carousel Tweaking
function mycarousel_initCallback(carousel) {
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
}
</script>
<body>
    <?php $this->load->view('boxes/header'); ?>
    <div class="main_container">
      <div class="content_bg main_content_bg">
      <div class="left_content">
      <div class="model_show">
      <span class="model_show_top">&nbsp;</span>
      <div class="model_show_mid">
      <?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>
     </div>
     <?php
       }
     }
     ?>
  </div><!--end of mode_show_mid -->

Answer 1

$(document).ready(function(){
$('.jcarousel-item').click(function(){
    var imgelem = $(this).find('img').attr('src');
    $('#yourmainimagecontainingid').html('<img src="'+imgelem+'"/>' );

});

});

单击缩略图时如何更改主图像中的图像而不改变周围环境？

1 个答案: