轮播图切换不正常

来源:3-5 滚动图片广告

小Z飞飞

2015-09-21 11:16

老师,在保证引入css和脚本无误的情况下,我按照视频的教法写出来的轮播图代码是有问题的,轮播图的左右切换按钮是无法实现点击切换功能的,但是轮播图又可以自主切换。请老师帮我看看问题出在哪里可以吗?



<!-- 广告轮播 -->

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">

    <li date-target="#carousel-example-generic" date-side-to="0" class="active"></li>

        <li date-target="#carousel-example-generic" date-side-to="1"></li>

        <li date-target="#carousel-example-generic" date-side-to="2"></li>

        <li date-target="#carousel-example-generic" date-side-to="3"></li>

        <li date-target="#carousel-example-generic" date-side-to="4"></li>

    </ol>

    <div class="carousel-inner" role="listbox">

    <div class="item active">

        <img src="images/chrome-big.jpg">

            <div class="carousel-caption">

            <h1>chrome</h1>

                <p>Google Chrome是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>

                <p><a href="#" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p>

            </div>

        </div>

        <div class="item">

        <img src="images/firefox-big.jpg">

            <div class="carousel-caption">

            <h1>Firefox</h1>

                <p>Firefox是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>

                <p><a href="#" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p>

            </div>

        </div>

        <div class="item">

        <img src="images/opera-big.jpg">

            <div class="carousel-caption">

            <h1>Opera</h1>

                <p>Opera是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>

                <p><a href="#" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p>

            </div>

        </div>

        <div class="item">

        <img src="images/safari-big.jpg">

            <div class="carousel-caption">

            <h1>Safari</h1>

                <p>Safari是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>

                <p><a href="#" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p>

            </div>

        </div>

        <div class="item">

        <img src="images/ie-big.jpg">

            <div class="carousel-caption">

            <h1>IE</h1>

                <p>IE是一款快速、简单且安全的网络浏览器,能很好地满足新型网站对浏览器的要求。</p>

                <p><a href="#" class="btn btn-lg btn-primary" role="button" target="_blank">点击下载</a></p>

            </div>

        </div>

    </div>

    <a class="left carousel-control" role="button" data-side="prev" href="#carousel-example-generic">

    <span class="glyphicon glyphicon-chevron-left"></span>

        <span class="sr-only">Prev</span>

    </a>

    <a href="#carousel-example-generic" class="right carousel-control" role="button" data-side="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

        <span class="sr-only">Next</span>

    </a>

</div>



写回答 关注

1回答

  • 哈七嗒八
    2016-01-07 18:20:55

    有两个问题:

    1,你将data-target写成了date-target

    2,你将date-slide-to写成了date-side-to,这里涉及小圆点和下面的前一页、后一页

基于bootstrap的网页开发

Bootstrap框架的基础教程,学会用Bootstrap前端框架搭建网页

187669 学习 · 734 问题

查看课程

相似问题