Question

我有4个区域可点击的图像，当我点击其中一个区域时会链接到幻灯片旋转木马引导程序。

我正在使用此代码进行图像映射：

<img src="img/home-top.jpg" class="img-responsive" alt="Responsive image" usemap="#map" />

<map name="map">
  <area shape="rect" coords="15,14,296,608" href="#" /> <!-- slide 1 active -->
  <area shape="rect" coords="334,17,623,613" href="#" /> <!-- slide 2 active -->
  <area shape="rect" coords="659,20,934,607" href="#" /> <!-- slide 3 active -->
  <area shape="rect" coords="978,18,1249,609" href="#" /> <!-- slide 4 active -->
</map>

和幻灯片轮播的代码：

<div class="carousel-inner lg-size">
        <div id="slide-1" class="item">
            <div class="fill" style="background-image:url('img/slide-1.jpg');"></div>
        </div>
        <div id="slide-2" class="item">
            <div class="fill" style="background-image:url('img/slide-2.jpg');"></div>
        </div>
        <div id="slide-3" class="item">
            <div class="fill" style="background-image:url('img/slide-3.jpg');"></div>
        </div>
        <div id="slide-4" class="item">
            <div class="fill" style="background-image:url('img/slide-4.jpg');"></div>
        </div>
</div>

这是我的代码点击功能：

$("area").click(function(){
    $("#slide-1").addClass("active");
});

但它对我不起作用。

Check jsFiddle

Answer 1

尝试以下代码

$("area").click(function()
{
   index= $(this).index(); //Get index position of current area tag
   ind = parseInt(index)+1; // .index function returns position from 0 so add 1 to current index
   $('.item').removeClass("active"); //Remove class active from slides
   $("#slide-"+ind).addClass("active"); //Add class active to corresponding slide
});

单击图像映射时的addClass

1 个答案: