首页 新闻 搜索 专区 学院

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">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

</div>
</div>
</div>

zhenghui100的主页 zhenghui100 | 初学一级 | 园豆:183
提问于:2014-01-03 22:40
< >
分享
最佳答案
0

把bootstrap的轮播的那个示范代码拷贝过来,稍微修改一下相关的Img信息,看看能否Ok!!!

奖励园豆:5
Angkor--:-- | 小虾三级 |园豆:1086 | 2014-01-05 00:57
其他回答(1)
0

http://www.cnblogs.com/aehyok/p/3427600.html   你可以参考下我的Bootstrap轮播示例

aehyok | 园豆:1012 (小虾三级) | 2014-01-03 23:20

我已经照你的示例,复制了代码,还是没有效果,不能自动轮播???

支持(0) 反对(0) zhenghui100 | 园豆:183 (初学一级) | 2014-01-04 09:53

@昆仑去也留: 我刚刚用我的代码测试是可以的呀  你用的什么浏览器进行测试的呢

支持(0) 反对(0) aehyok | 园豆:1012 (小虾三级) | 2014-01-04 10:12

@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>
View Code

我就用的这段代码,你可以直接复制,然后把css和js文件路径进行修正试试,记得用高版本的浏览器。

支持(0) 反对(0) aehyok | 园豆:1012 (小虾三级) | 2014-01-04 10:15

@aehyok: 用你的代码,是可以的。我实在是没找出问题,为什么我的代码不行,我的代码,是你只要手动点击让他切换 ,往后都是自动切换的。你不手动弄第一次,他是打死也不动的。这是怎么回事呢?

支持(0) 反对(0) zhenghui100 | 园豆:183 (初学一级) | 2014-01-04 10:53

@昆仑去也留: 你js代码在哪里写的  

支持(0) 反对(0) aehyok | 园豆:1012 (小虾三级) | 2014-01-04 10:57

@aehyok: 你也可以把我的代码改改就可以了,对比一下 唉  

支持(0) 反对(0) aehyok | 园豆:1012 (小虾三级) | 2014-01-04 13:26

@aehyok: 写在前面,这个bootstrap的轮播必须用js启动码,它不自动启动码??另外ie8下没有过度效果,怎么解决个问题。

支持(0) 反对(0) zhenghui100 | 园豆:183 (初学一级) | 2014-01-04 16:39

@昆仑去也留: 这个问题至今未解决,大神,求思路啊!

支持(0) 反对(0) zhenghui100 | 园豆:183 (初学一级) | 2014-01-04 18:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册