jquery淡出並點擊功能

Question

希望你們都做得很好。

所以我有沒有使用任何插件

$(document).ready(function() { 
var index =1; 
    var images = ['1.jpg','2.jpg','3.jpg']; 
    var caption_text = ["title1","title2","title3"]; 
    function rotateImage() 
    { 

     $('#gallery').fadeOut('fast', function() 
     { 
     $(this).attr('src','<?php echo base_url()."assets/highlight/";?>'+ images[index]); 
     $('span').text(caption_text[index]); 
     $(this).fadeIn('fast', function() 
     { 
      if (index == images.length-1) 
      { 
      index = 0; 
      } 
      else 
      { 
      index++; 
      } 

     }); 
     }); 

    } 
    setInterval (rotateImage, 2500); 

$('.thumb').on('click', function() { 
     var img = $('<img />', {src : this.src, 
           'class': 'highlight_img' 
        }); 
     var imageTitle = $(this).attr("title");  
     $('.highlight').html(img).show(); 
     $('.highlight').append("<br/><span class='highlight_caption'>"+imageTitle+"</span>"); 
     setInterval (rotateImage, 5000); 
    }); 
}); 

畫廊，這是我的HTML

<div class='col-md-12 highlight'> 
    <img id='gallery' src='<?php echo site_url('assets/highlight/1.jpg');?>' height='300' class='highlight_img'/><br/> 
    <span id='highlight_caption' class='highlight_caption'>title1</span> 
</div> 

<div class='list'> 
<div><img class='thumb' src='<?php echo site_url('assets/highlight/1.jpg');?>' height='75' title='title1'/></div> 
<div><img class='thumb' src='<?php echo site_url('assets/highlight/2.jpg');?>' height='75' title='title2'/></div> 
<div><img class='thumb' src='<?php echo site_url('assets/highlight/3.jpg');?>' height='75' title='title3'/></div> 

現在，我可以做圖像旋轉時沒有問題的頁面加載。另外，當我單擊圖像縮略圖時，#gallery div也會根據縮略圖改變圖像，我點擊

但是，當我在點擊函數上調用縮略圖時，rotateImage（）不再工作，我需要刷新頁面以使圖像再次旋轉。

我該如何編碼來執行此操作？

謝謝！

編輯：

對不起，我沒有說清楚 我的問題是，我已經把 「的setInterval（rotateImage，5000）;」在click（）函數中.thumb。我知道它正在運行，因爲我試圖console.log，腳本執行，但爲什麼圖像沒有改變？

Answer 1

你可以試試這個;

JQUERY

$(document).ready(function() { 
    var index   = 1, 
     images  = ['300x300','290x300','280x300'], 
     caption_text = ['title1','title2','title3'], 
     timer   = null; 

    function rotateImage() { 

     $('#gallery').fadeOut('fast', function() { 
     $(this).attr('src','http://www.placehold.it/'+ images[index]); 
     $('span').text(caption_text[index]); 
     $(this).fadeIn('fast', function() { 
      if (index == images.length-1) { 
      index = 0; 
      } else { 
      index++; 
      } 
     }); 
     }); 
    } 
timer = setInterval (rotateImage, 2500); 

$('.thumb').on('click', function() { 
    var $this  = $(this), 
     img  = $this.attr('src'), 
     imageTitle = $this.attr('title');  
    $('.highlight') 
     .children('img') 
     .attr('src',img) 
     .show() 
     .end() 
      .children('.highlight_caption') 
       .text(imageTitle); 
     clearInterval(timer); 
     setInterval (rotateImage, 5000); 
    }); 
}); 

HTML

<div class='col-md-12 highlight'> 
    <img id='gallery' src='http://www.placehold.it/300x300' height='300' class='highlight_img'/> <br/> 
    <span id='highlight_caption' class='highlight_caption'>title1</span> 
</div> 

<div class='list'> 
    <div><img class='thumb' src='http://www.placehold.it/400x400' height='75' title='title1'/> </div> 
<div><img class='thumb' src='http://www.placehold.it/500x500' height='75' title='title2'/></div> 
<div><img class='thumb' src='http://www.placehold.it/350x350' height='75' title='title3'/></div> 

http://jsfiddle.net/DKw8D/6/