bootstrap轮播时间问题
0
[已解决问题]
解决于 2015-07-27 23:57
用bootstrap写的轮播，默认5秒，浏览时，5秒后没有效果，我已经把轮播启动了 。不过我在调的过程中，它有次是有效果的，之后就没有了。这是要闹妖吗？求各路神仙指教！
$("#myCarousel").carousel();
<div class="container">
<div class="row">
<div class="span9">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="img/二十四孝.png" alt="" />
<div class="carousel-caption">
<h4>二十四孝图</h4>
<p>这是一幅二十四孝图，国画</p>
</div>
</div>
<div class="item">
<img src="img/截图01.png" alt="" style="background-repeat:repeat-x"/>
<div class="carousel-caption">
<h4>二十四孝图----截图01</h4>
<p>这是一幅二十四孝图，国画</p>
</div>
</div>
<div class="item">
<img src="img/截图02.png" alt="" style="background-repeat:repeat-x"/>
<div class="carousel-caption">
<h4>二十四孝图----截图02</h4>
<p>这是一幅二十四孝图，国画</p>
</div>
</div>
<div class="item">
<img src="img/截图03.png" alt="" style="background-repeat:repeat-x"/>
<div class="carousel-caption">
<h4>二十四孝图----截图03</h4>
<p>这是一幅二十四孝图，国画</p>
</div>
</div>
<div class="item">
<img src="img/截图04.png" alt="" style="background-repeat:repeat-x"/>
<div class="carousel-caption">
<h4>二十四孝图----截图04</h4>
<p>这是一幅二十四孝图，国画</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
最佳答案
0
把bootstrap的轮播的那个示范代码拷贝过来，稍微修改一下相关的Img信息，看看能否Ok！！！
奖励园豆：5
其他回答(1)
0
http://www.cnblogs.com/aehyok/p/3427600.html 你可以参考下我的Bootstrap轮播示例
我已经照你的示例，复制了代码，还是没有效果，不能自动轮播？？？
@昆仑去也留: 我刚刚用我的代码测试是可以的呀 你用的什么浏览器进行测试的呢
@aehyok:
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" > <!-- 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" style="text-align:center"> <div class="item active"> <img alt="First slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=First slide" ></img> </div> <div class="item"> <img alt="Second slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Second slide" ></img> </div> <div class="item"> <img alt="Third slide" src="http://placehold.it/900x500/78EB09/FFEB09/&text=Third slide" ></img> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $('.carousel').carousel(); </script> </body>
我就用的这段代码，你可以直接复制，然后把css和js文件路径进行修正试试，记得用高版本的浏览器。
@aehyok: 用你的代码，是可以的。我实在是没找出问题，为什么我的代码不行，我的代码，是你只要手动点击让他切换 ，往后都是自动切换的。你不手动弄第一次，他是打死也不动的。这是怎么回事呢？
@昆仑去也留: 你js代码在哪里写的
@aehyok: 你也可以把我的代码改改就可以了，对比一下 唉
@aehyok: 写在前面，这个bootstrap的轮播必须用js启动码，它不自动启动码？？另外ie8下没有过度效果，怎么解决个问题。
@昆仑去也留: 这个问题至今未解决，大神，求思路啊！
