我的引导旋转木马有4张幻灯片，所有幻灯片都有动画图表但动画仅在第一张幻灯片中看到。 如何确保还可以看到3张幻灯片其余部分的图表动画？
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="trycarousel.aspx.cs" Inherits="trycarousel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
<div class="item">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color:white"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
var mydata2 = [
{
value: 0.39,
color: "#18a5a5 ",
title: "A"
},
{
value: 10.13,
color: "#3f51b5",
title: "B"
},
{
value: 44.29,
color: "#df982f",
title: "C"
},
{
value: 45.19,
color: "#668f4a",
title: "D"
}
];
var startWithDataset = 1;
var startWithData = 1;
var opt1c = {
animationStartWithDataset: startWithDataset,
animationStartWithData: startWithData,
animateRotate: true,
animateScale: false,
animationByData: "ByArc",
animationSteps: 50,
canvasBorders: false,
canvasBordersWidth: 3,
canvasBordersColor: "black",
legend: true,
inGraphDataShow: true,
animationEasing: "linear",
annotateDisplay: true,
spaceBetweenBar: 5,
graphTitleFontSize: 18
}
window.onload = function draw() {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
}
</script>
</form>
</body>
</html>
我试过了：
所以，我修改了我的代码。我不确定那篇文章是否解决了我的问题。我只想在每张幻灯片中显示动画，目前仅在第一张幻灯片中出现。
我根据上述文章修改的代码是：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<link rel="stylesheet" href="css-sheets/bootstrap.css">
<script src="css-sheets/jquery.min.js"></script>
<script src="charts/ChartNew.js"></script>
<script src="css-sheets/bootstrap.min.js"></script>
<style>
body {padding-top:80px;}
.inactive{opacity:0;}
body {padding-top:80px;} .inactive{opacity:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" style="max-width:900px;">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<canvas id="canvas_Pie1c" height="500" width="1000"></canvas>
</div>
<div class="item " id="z1">
<canvas id="canvas_Pie2c" height="500" width="1000"></canvas>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.js"></script>
<script>
function transitions() {
var j = 1;
for (var i = 1; i <= 4; i++) {
setTimeout(
function () {
if (!$.support.transition) { $('#z' + i).removeClass('inactive') }
else
{
$('#z' + j).addClass('animated').addClass('fadeInLeft');
$('#z' + j).one($.support.transition.end, function () { $('#z' + i).removeClass('inactive') }).emulateTransitionEnd(2000);
}
j++
},
2000 * (i - 1));
}
}
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function (evt) {
if ($(this).find('.active').index() == 1) {
$(this).carousel('pause');
/* run your transitions */
transitions();
var that = $(this);
/*restart your carousal */
setTimeout(function () {
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
}, 2000 * 5);
}
});
</script>
仍然无效：/
我可能会错过一些非常简单/愚蠢的事情。这是我第一次尝试使用javascript.Please帮助。
答案 0 :(得分：0)
您正在window.onload创建图表动画。将其复制到 slid.bs.carousel 事件。请查看以下代码段。
$(".carousel").on('slid.bs.carousel', function (evt) {
var myPie = new Chart(document.getElementById("canvas_Pie1c").getContext("2d")).Pie(mydata2, opt1c);
var myPie = new Chart(document.getElementById("canvas_Pie2c").getContext("2d")).Pie(mydata2, opt1c);
});