2016-05-02 5 views
0

У меня есть 8 из следующих диаграммКнопки увеличение переменного числа DIV

https://jsfiddle.net/BernydotJAr/grwzfjsn/

друг с другим DIV ID, конечно, и я попытался поставить кнопку в середине его для переключения или изменений между ними, как слайд-шоу, мне удалось изменить изображения, но не DIVS.

<div id="chartdiv"></div>    
<div id="chartdiv2"></div>   

Я попытался с JQuery, но я не могу показать, что находится внутри div. поэтому, когда я нажимаю кнопку, он должен добавить число, например chartdiv & 1, chartdiv & 2 и так далее, поэтому я могу отображать один за другим. Ниже приведен код JQuery (я получил его отсюда: http://www.html5marketplace.com/slideshow/direct/index.html)

<script> 
$(window).load(function(){ 
    var pages = $('#container li'), current=0; 
    var currentPage,nextPage; 
    var handler=function(){ 
     $('#container .button').unbind('click'); 
     currentPage= pages.eq(current); 
     if($(this).hasClass('prevButton')) 
     { 
      if (current <= 0) 
       current=pages.length-1; 
      else 
       current=current-1; 
      nextPage = pages.eq(current); 

      nextPage.css("marginLeft",-604); 
      nextPage.show(); 
      nextPage.animate({ marginLeft: 0 }, 800,function(){ 
       currentPage.hide(); 
      }); 
      currentPage.animate({ marginLeft: 604 }, 800,function(){ 
       $('#container .button').bind('click',handler); 
      }); 
     } 
     else 
     { 

      if (current >= pages.length-1) 
       current=0; 
      else 
       current=current+1; 
      nextPage = pages.eq(current); 

      nextPage.css("marginLeft",604); 
      nextPage.show(); 
      nextPage.animate({ marginLeft: 0 }, 800,function(){ 
      }); 
      currentPage.animate({ marginLeft: -604 }, 800,function(){ 
       currentPage.hide(); 
       $('#container .button').bind('click',handler); 
      }); 
     } 
    } 

    $('#container .button').click(handler); 

    }); 

</script> 
+2

Ваша ссылка JSFiddle неверен. – Marie

+0

Пожалуйста, уточните, что вы скрипки, это не работает –

+0

Исправлено, спасибо за ваше время :) –

ответ

0

на основе коды вы предоставили и код, который вы получили от другого сайта дива должна быть внутри литий elements.Something как это

<div id="container"> 
<ul> 
<li> 
    <div id="chartdiv"></div>   
</li> 
<li style="display:none;"> 
    <div id="chartdiv2"></div>    
</li> 
<li style="display:none;"> 
    <div id="chartdiv3"></div>    
</li> 
</ul> 
<span class="button prevButton"></span> 
<span class="button nextButton"></span> 
</div> 

Посмотреть полный код здесь

https://jsfiddle.net/grwzfjsn/3/

+0

OMG, да, это имеет смысл ... большое вам спасибо, это то, что я хотел. Я не знаю, как я могу поблагодарить тебя, но да ... Я так счастлив. –

+0

Рад, что я тебе помог :) –

Смежные вопросы