Question

我有以下8个图表

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

每个人当然都有不同的DIV ID，我试图在它的中间放一个按钮来切换或在幻灯片放映之间切换，我能够改变图像而不是DIVS。

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

我曾尝试使用Jquery，但我无法显示div中的内容。所以当我点击一个按钮时，它应该添加一个像chartdiv＆amp; 1，chartdiv＆amp; 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>

Answer 1

根据您提供的代码和您从其他网站获得的代码，div必须位于li elements内。这样的事情

<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/

用于增加DIV编号变量的按钮

1 个答案: