增加 DIV 数字变量的按钮
Button to increase an DIV number variable
我有以下 8 个图表
https://jsfiddle.net/BernydotJAr/grwzfjsn/
每个都有不同的 DIV ID 当然,我试着在它中间放一个按钮来像幻灯片放映一样在它们之间切换或切换,我可以更改图像但不能 DIVS.
<div id="chartdiv"></div>
<div id="chartdiv2"></div>
我试过 Jquery,但无法显示 div 中的内容。因此,当我单击一个按钮时,它应该添加一个数字,如图表div & 1、图表div & 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>
根据您提供的代码和您从其他站点获得的代码,div 必须像这样在 li 中 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>
在此处查看完整代码
我有以下 8 个图表
https://jsfiddle.net/BernydotJAr/grwzfjsn/
每个都有不同的 DIV ID 当然,我试着在它中间放一个按钮来像幻灯片放映一样在它们之间切换或切换,我可以更改图像但不能 DIVS.
<div id="chartdiv"></div>
<div id="chartdiv2"></div>
我试过 Jquery,但无法显示 div 中的内容。因此,当我单击一个按钮时,它应该添加一个数字,如图表div & 1、图表div & 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>
根据您提供的代码和您从其他站点获得的代码,div 必须像这样在 li 中 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>
在此处查看完整代码