SVG圆的部分，与其他div的间隔自动更改，如果部分被点击显示选定的div。

Question

我知道标题是混乱的，但这里到底是什么我的意思是：

我有一个SVG循环，在5个部分分成就像链接预览

有右侧改变一个div其内容基于圆的选定部分，例如，如果所选部分是编号3

该部分上的文本变为白色，路径的背景变为蓝色，右边的div将其内容更改为所选部分。

我的问题是，我需要做出同样的功能，但我需要它是自动的，这意味着要从第一节 - 两个 - 三 - 四个五改变，并在右边的div的内容应该以相同的时间间隔改变。我已经尝试了JavaScript的区间，它可以工作，但只能用于其中一个部分，无论是圆形还是div。

任何帮助，将不胜感激。

这里是LIVE例 link to live example

CODE：

HTML：

<div class="whatwedosection" style="position: relative;"> 
     <p class="title1">OUR PRODUCTS</p> 
     <p class="title2">OUR APPS for Salesforce.com</p> 
     <div class="line" style="margin-bottom: 30px;"></div> 

     <div class="row"> 
      <div class="col-md-2"></div> 
       <div class="col-md-3"> 

       <svg viewBox='0 0 110 110' style="margin-top: 10px;transform: rotate(18deg);"> 
       <defs>     <!-- Circular path with a radius of 40 --> 

        <path id="clockwise" d='M55,15 A40,40 0 0 1 55,95 A40,40 0 0 1 55,15' 
         transform="rotate(-54,55,55)"/> 

        <path id="counterclockwise" d="M35,93 a55,95 0 0,0 40,0" transform="rotate(-55,55,55)"></path> 
        <path id="counterclockwise2" d="M35,93 a55,95 0 0,0 40,0" transform="rotate(7,55,55)"></path> 



       </defs> 


       <a xlink:href="" style="text-decoration: none;"> 
        <path class="frag logoa" id="f1" data-link="1" d='M55,55 L14.54915028125263,25.61073738537635 A50,50 0 0,1 70.45084971874736,7.447174185242318z' > 
        </path> 
        <text class="zone textosvg1" data-link="1" > 
         <textPath xlink:href="#clockwise" startOffset="10%" text-anchor="middle" > 
          one 
         </textPath> 
        </text> 
       </a> 


       <a xlink:href="" style="text-decoration: none;"> 
        <path class="frag logoa" id="f2" data-link="2" d='M55,55 L70.45084971874736,7.447174185242318 A50,50 0 0,1 105,54.999999999999986z' ></path> 
        <text class="zone textosvg2" data-link="2" > 
         <textPath xlink:href="#clockwise" startOffset="30%" text-anchor="middle"> 
          two 
         </textPath> 
        </text> 
       </a> 



       <a xlink:href="" style="text-decoration: none;"> 
        <path class="frag logoa" id="f3" data-link="3" d='M55,55 L105,55 A50,50 0 0,1 70.45084971874738,102.55282581475768z'></path> 
        <text class="zone textosvg3" data-link="3" > 
         <textPath xlink:href="#counterclockwise" x="5" y="50" startOffset="50%" text-anchor="middle"> 
          three 
         </textPath> 
        </text> 

       </a> 


       <a xlink:href="" style="text-decoration: none;" > 
        <path class="frag logoa" id="f4" data-link="4" d='M55,55 L70.45084971874738,102.55282581475768 A50,50 0 0,1 14.549150281252636,84.38926261462366z' ></path> 
        <text class="zone textosvg4" data-link="4" > 
         <textPath xlink:href="#counterclockwise2" x="5" y="50" startOffset="30%" text-anchor="middle"> 
         four 
         </textPath> 
        </text> 
       </a> 
       <a xlink:href="" style="text-decoration: none;" > 
        <path class="frag logoa" id="f5" data-link="5" d='M55,55 L14.549150281252636,84.38926261462366 A50,50 0 0,1 14.54915028125263,25.61073738537635z' ></path> 
        <text class="zone textosvg5" data-link="5" > 
         <textPath xlink:href="#clockwise" startOffset="90%" text-anchor="middle"> 
         five 
         </textPath> 
        </text> 
       </a> 
       <circle class="cente" cx='55' cy='55' r='35' ></circle> 
       <circle class="minicirculo" cx='55' cy='55' r='15' ></circle> 
       </svg> 

      </div> 
      <div class="col-md-5" > 
       <div class="casa monitores" data-link="1"> 
        <div class="fixed"> 
         <img src="http://placehold.it/200x200" class="sideruedai"> 
        </div> 
        <div class="flex-item"> 
        <p class="title22" style="margin-top: 15px;" >first</p> 
        <p class="textsliderp" style="margin-top: -20px;">first</p> 
        <p class="textoinfo"> 
        first 
        </p> 
        <button class="botonavandel hvr-grow">Read More</button></div> 
       </div> 

       <div class="casa monitores" data-link="2"> 
        <div class="fixed"> 
         <img src="http://placehold.it/200x200" class="sideruedai"> 
        </div> 
        <div class="flex-item"> 
        <p class="title22" style="margin-top: 15px;" >Second</p> 
        <p class="textsliderp" style="margin-top: -20px;">Second</p> 
        <p class="textoinfo"> 
        second 
        </p> 
        <button class="botonavandel hvr-grow">Read More</button></div> 
       </div> 

       <div class="casa monitores" data-link="3"> 
        <div class="fixed"> 
         <img src="http://placehold.it/200x200" class="sideruedai"> 
        </div> 
        <div class="flex-item"> 
        <p class="title22" style="margin-top: 15px;" >third</p> 
        <p class="textsliderp" style="margin-top: -20px;">third</p> 
        <p class="textoinfo"> 
        third 
        </p> 
        <button class="botonavandel hvr-grow">Read More</button></div> 
       </div> 

       <div class="casa monitores" data-link="4"> 
        <div class="fixed"> 
         <img src="http://placehold.it/200x200" class="sideruedai"> 
        </div> 
        <div class="flex-item"> 
        <p class="title22" style="margin-top: 15px;" >four</p> 
        <p class="textsliderp" style="margin-top: -20px;">four</p> 
        <p class="textoinfo"> 
        four 
        <button class="botonavandel hvr-grow">Read More</button></div> 
       </div> 

       <div class="casa monitores" data-link="5"> 
        <div class="fixed"> 
         <img src="http://placehold.it/200x200" class="sideruedai"> 
        </div> 
        <div class="flex-item"> 
        <p class="title22" style="margin-top: 15px;" >fifth</p> 
        <p class="textsliderp" style="margin-top: -20px;">fifth</p> 
        <p class="textoinfo"> 
        fifth. 
        </p> 
        <button class="botonavandel hvr-grow">Read More</button></div> 
       </div> 




      <div class="col-md-2" > 

      </div> 
      </div> 
     </div> 


    </div> 

CSS：

.textosvg1{ 
    fill:gray; 
    font-size: 6px; 
} 
.textosvg2{ 
    fill:gray; 
    font-size: 6px; 
} 
.textosvg3{ 
    fill:gray; 
    font-size: 6px; 
} 
.textosvg4{ 
    fill:gray; 
    font-size: 6px; 
} 
.textosvg5{ 
    fill:gray; 
    font-size: 6px; 
} 
.textosvg6{ 
    fill:gray; 
    font-size: 6px; 
} 

.slidertext{ 
    font-size: 14px; 
    color:#1456a0; 
    text-align: left;s 
} 
.frag { 
    fill: white; 
    stroke: black; 
    stroke-width: .5; 
    transition: fill 0.3s ; 
} 
text a { 
    text-anchor: middle; 
    dominant-baseline: middle; /* doesn't work in IE */ 
    text-decoration: none; 
    color: gray; 
} 

JS：

$('.monitores:not(:nth-child(1))').hide(); 
$('.textosvg1').css({ fill: 'white' }); 
$('#f1').css({ fill: '#1456a0' }); 

    $('.zone').click(
     function() { 
      $('.monitores').hide(); 
      $('.monitores[data-link=' + $(this).data('link') + ']').fadeIn(); 

     }); 


    $('.textosvg1').click(function() { 
     $('.textosvg1').css({ fill: 'white' }); 
     $('#f1').css({ fill: '#1456a0' }); 

     $('.textosvg2').css({ fill: 'gray' }); 
     $('#f2').css({ fill: 'white' }); 

     $('.textosvg3').css({ fill: 'gray' }); 
     $('#f3').css({ fill: 'white' }); 

     $('.textosvg4').css({ fill: 'gray' }); 
     $('#f4').css({ fill: 'white' }); 

     $('.textosvg5').css({ fill: 'gray' }); 
     $('#f5').css({ fill: 'white' }); 


    }); 
    $('.textosvg2').click(function() { 
     $('.textosvg2').css({ fill: 'white' }); 
     $('#f2').css({ fill: '#1456a0' }); 

     $('.textosvg1').css({ fill: 'gray' }); 
     $('#f1').css({ fill: 'white' }); 

     $('.textosvg3').css({ fill: 'gray' }); 
     $('#f3').css({ fill: 'white' }); 

     $('.textosvg4').css({ fill: 'gray' }); 
     $('#f4').css({ fill: 'white' }); 

     $('.textosvg5').css({ fill: 'gray' }); 
     $('#f5').css({ fill: 'white' }); 

    }); 

    $('.textosvg3').click(function() { 
     $('.textosvg3').css({ fill: 'white' }); 
     $('#f3').css({ fill: '#1456a0' }); 

     $('.textosvg1').css({ fill: 'gray' }); 
     $('#f1').css({ fill: 'white' }); 

     $('.textosvg2').css({ fill: 'gray' }); 
     $('#f2').css({ fill: 'white' }); 

     $('.textosvg4').css({ fill: 'gray' }); 
     $('#f4').css({ fill: 'white' }); 

     $('.textosvg5').css({ fill: 'gray' }); 
     $('#f5').css({ fill: 'white' }); 

    }); 
    $('.textosvg4').click(function() { 
     $('.textosvg4').css({ fill: 'white' }); 
     $('#f4').css({ fill: '#1456a0' }); 

     $('.textosvg1').css({ fill: 'gray' }); 
     $('#f1').css({ fill: 'white' }); 

     $('.textosvg2').css({ fill: 'gray' }); 
     $('#f2').css({ fill: 'white' }); 

     $('.textosvg3').css({ fill: 'gray' }); 
     $('#f3').css({ fill: 'white' }); 

     $('.textosvg5').css({ fill: 'gray' }); 
     $('#f5').css({ fill: 'white' }); 

    }); 
    $('.textosvg5').click(function() { 
     $('.textosvg5').css({ fill: 'white' }); 
     $('#f5').css({ fill: '#1456a0' }); 

     $('.textosvg1').css({ fill: 'gray' }); 
     $('#f1').css({ fill: 'white' }); 

     $('.textosvg2').css({ fill: 'gray' }); 
     $('#f2').css({ fill: 'white' }); 

     $('.textosvg3').css({ fill: 'gray' }); 
     $('#f3').css({ fill: 'white' }); 

     $('.textosvg4').css({ fill: 'gray' }); 
     $('#f4').css({ fill: 'white' }); 

    }); 

Answer 1

找到了解决方案我的自我，在Jquery中创建了不同的函数，以防您想要查看它！

事情是有一个变量来检查，如果在间隔时间点击，停止它，然后清空每一种颜色。

var cont = 1; 
var clicked = false; 
var intervalo; 


function spinner(c){ 
    intervalo = setInterval(function(){ 
      if (cont==5) { 
       $('.textosvg' + cont).css({ fill: 'gray' }); 
       $('#f' + cont).css({ fill: 'white' }); 
       cont = 0; 
       $('.textosvg' + cont).css({ fill: 'white' }); 
       $('#f' + cont).css({ fill: '#1456a0' }); 
      } 
     $('.textosvg' + cont).css({ fill: 'gray' }); 
     $('#f' + cont).css({ fill: 'white' }); 
     cont++; 
     $('.textosvg' + cont).css({ fill: 'white' }); 
     $('#f' + cont).css({ fill: '#1456a0' }); 
     var first = $(".monitores:first-of-type").remove(); 
     $(".monitores").parent().append(first); 


    }, 2300); 


} 

spinner(cont); 

$(document).on("click","path,text",function() { 
    clicked = true; 
    var element = $('.monitores[data-link=' + $(this).attr('data-link') + ']').remove(); 
    $(".monitores").parent().prepend(element); 
     if (clicked == true) { 
     clearInterval(intervalo); 
     vaciarCircle(); 
     var pat = ('.textosvg' + $(this).attr('data-link') + ''); 
     var txt = ('#f' + $(this).attr('data-link') + ''); 
     $(pat).css({ fill: 'white' }); 
     $(txt).css({ fill: '#1456a0' }); 
    } 

}); 

function vaciarCircle(){ 
    for (var i = 5; i >= 0; i--) { 
      $('.textosvg' + i).css({ fill: 'gray' }); 
      $('#f' + i).css({ fill: 'white' }); 
     } 
}