为缩略图创建活动状态

Question

我在我的网站上使用全屏图像库，但是我试图设计缩略图的样式，使我能够浏览不同的图像。缩略图是用JS文件生成的。我设法将它们设置为三角形，具有正常和悬停状态。

我的问题是，我想为此添加一个ACTIVE，在显示某些图像时显示黑色三角形。我怎样才能做到这一点？

JS文件

<script type="text/javascript"> 
    var slider; 
    var images = [ 
     "images/productie/1.jpg", 
     "images/productie/2.jpg", 
     "images/productie/3.jpg", 
     "images/productie/4.jpg", 
     "images/productie/5.jpg" 
    ]; 
    var index = 0; 
    var transitionSpeed = 500; 
    var imageIntervals = 5000; 
    var startIntervals; 
    var intervalSetTime; 
    var contentOpen = false; 

    $(document).ready(function(){ 

     slider = $('#slider1').bxSlider({ 
      mode: 'fade', 
      controls: false, 
      pause: imageIntervals 
     }); 

     for (i=0;i<=images.length - 1;i++){ 
      $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>'); 
     } 

     $(function() { 

      $.preload(images, { 
       init: function(loaded, total) { 
        $("#indicator").html("<img src='images/load.gif' />");   
       }, 

       loaded_all: function(loaded, total) { 
        $('#indicator').fadeOut('slow', function() { 
         $('#left-side').fadeIn('slow'); 
         $('#thumb-container').fadeIn('slow'); 

         $.backstretch(images[index], {speed: transitionSpeed}); 

         startIntervals = function(){ 
          intervalSetTime = setInterval(function() { 
          index = (index >= images.length - 1) ? 0 : index + 1; 
          $.backstretch(images[index]); 
          slider.goToNextSlide() 
         }, imageIntervals)}; 

         startIntervals();     
        }); 
       } 
      }); 
     }); 
    }); 

    function goToContent(slideNum){ 
     clearInterval(intervalSetTime); 
     index = slideNum; 
     $.backstretch(images[index]); 
     slider.goToSlide(slideNum); 
     if (contentOpen == false){ 
      startIntervals(); 
     } 
    }; 

    function showContent(){ 
     $('.content-bg').fadeIn('slow'); 
     clearInterval(intervalSetTime); 
     contentOpen = true; 
    }; 
    function closeContent(){ 
     $('.content-bg').fadeOut('slow'); 
     startIntervals(); 
     contentOpen = false; 
    }; 
    </script> 

CSS

#thumb-container{ 
    display:none; 
} 

#thumb-container img{ 
    float:left; 
    border:0; 
    width: 0; 
    height: 0; 
    margin:2px; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid #fff; 
} 

#thumb-container img:hover{ 
    float:left; 
    border:0; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid #000; 
    } 

Answer 1

问题是由Shefqet Avdullau

回答的Javascript

var slider; 
var images = [ 
    "IMAGES LINK", 
    "IMAGES LINK", 
    "IMAGES LINK" 
]; 
var index = 0; 
var transitionSpeed = 500; 
var imageIntervals = 5000; 
var startIntervals; 
var intervalSetTime; 
var contentOpen = false; 

$(document).ready(function(){ 

    slider = $('#slider1').bxSlider({ 
     mode: 'fade', 
     controls: false, 
     pause: imageIntervals 
    }); 

    for (i=0;i<=images.length - 1;i++){ 
     $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>'); 
    } 

    $(function() { 

     $.preload(images, { 
      init: function(loaded, total) { 
       $("#indicator").html("<img src='images/load.gif' />");    
      }, 

      loaded_all: function(loaded, total) { 
       $('#indicator').fadeOut('slow', function() { 
        $('#left-side').fadeIn('slow'); 
        $('#thumb-container').fadeIn('slow'); 

        /* added by Shefqet Avdullau */ 
        $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor'); 
        $.backstretch(images[index], {speed: transitionSpeed}); 

        startIntervals = function(){ 
         intervalSetTime = setInterval(function() { 
         index = (index >= images.length - 1) ? 0 : index + 1; 

         /* added by me */ 
         $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor'); 

         $.backstretch(images[index]); 
         slider.goToNextSlide() 
        }, imageIntervals)}; 

        startIntervals();      
       }); 
      } 
     }); 
    }); 
}); 

function goToContent(slideNum){ 
    clearInterval(intervalSetTime); 
    index = slideNum; 
    /* added by Shefqet Avdullau */ 
    $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor'); 

    $.backstretch(images[index]); 
    slider.goToSlide(slideNum); 
    if (contentOpen == false){ 
     startIntervals(); 
    } 
}; 

function showContent(){ 
    $('.content-bg').fadeIn('slow'); 
    clearInterval(intervalSetTime); 
    contentOpen = true; 
}; 
function closeContent(){ 
    $('.content-bg').fadeOut('slow'); 
    startIntervals(); 
    contentOpen = false; 
}; 

CSS

/* THUMB SECTION */ 

#thumb-container{ 
    display:none; 
} 

#thumb-container img{ 
    float:left; 
    border:0; 
    width: 0; 
    height: 0; 
    margin:2px; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid #fff; 
} 

/* added by Shefqet Avdullau */ 

#thumb-container a.current_anchor img, 

#thumb-container img:hover, 
#thumb-container img.displayed { 
    float:left; 
    border:0; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid #6bcade; 
} 

Answer 2

随着对这个问题的最后澄清评论，我相信你应该添加和删除相应的CSS类（如displayed）从缩略图，使用JavaScript。并修改最后规则选择是：

#thumb-container img:hover, #thumb-container img.displayed