焦点自动滚动图,当我手动点击滚动后才自动滚动,用的是Bootstrap 轮播(Carousel)插件

自行脑补
  • 1k

以下是我的代码,求解答,到底是哪里冲突了,还是Bootstrap代码这个有问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work_6</title>
    <link rel="stylesheet"  href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet"  href="bootstrap-3.3.5-dist/js/bootstrap.min.js">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="bootstrap-3.3.5-dist/lib-bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">    
</head>
<body>
    <div class="topline"></div>
    <div id="wrapper">
        <div class="header">
            <div id="logo">TEMPLATE</div>
            <div class ="topbar">
                <ul class="top-nav">
                    <li><a href="#">首页</a></li>
                    <li class="dropdown"><a href="#">人气高校</a>
                        <ul class="dropdown-menu">
                            <li><a href="index_dgut.html">东莞理工学院</a></li>
                            <li><a href="#menu8">麻省理工学院</a></li>
                        </ul>
                    </li>
                    <li><a href="index_企业.html">最新活动</a></li>
                    <li><a href="#">活动资讯</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">留言板</a></li>
                </ul>    
            </div>
        </div>

    <div id="myCarousel" class="carousel slide">
    <!-- 轮播(Carousel)指标 -->
    <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)项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/1.jpg" alt="First slide">
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            <img src="img/2.jpg" alt="Second slide">
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            <img src="img/3.jpg" alt="Third slide">
            <div class="carousel-caption">标题 3</div>
        </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="carousel-control left icon-arrow-left2" href="#myCarousel" 
       data-slide="prev" style="position:absolute;z-index:3;left:0px;top:50%;margin-top:-35.5px;width:100px;height:100px;line-height:100px;"></a>
    <a class="carousel-control right icon-arrow-right2" href="#myCarousel" 
       data-slide="next" style="position:absolute;z-index:3;right:0px;top:50%;margin-top:-35.5px; width:100px;height:100px;line-height:100px;"></a>
    </div>
    </div>

        <div class="school-imgs">
            <span>人气高校</span>
            <div id="school-img_1" class="school-img"><img src="img/school1.jpg" alt="">
                <div class="bottom-word"><a href="#">东莞理工学院</a></div>
            </div>
            <div id="school-img_2" class="school-img"><img src="img/school2.jpg" alt="">
                <div class="bottom-word"><a href="#">东莞理工学院</a></div>
            </div>
            <div id="school-img_3" class="school-img"><img src="img/school3.jpg" alt="">
                <div class="bottom-word"><a href="#">东莞理工学院</a></div>
            </div>
        </div>
        <div class="school-new">
            <span >最新活动</span>
            <div id="school-new1"><img src="img/ac2.jpg" alt=""><div id="school-new-word1">#“学媒杯”好新闻比赛开始征稿啦!#[酷]本次活动主题是“促莞工高水平,做莞工记录人”,活动时间从2016年3月28日到2016年5月26日。[爱你]本次活动面向东莞理工学院全体学生哦</div></div>
            <div id="school-new2"><img src="img/ac1.jpg" alt=""><div id="school-new-word2">#“学媒杯”好新闻比赛开始征稿啦!#[酷]本次活动主题是“促莞工高水平,做莞工记录人”,活动时间从2016年3月28日到2016年5月26日。[爱你]本次活动面向东莞理工学院全体学生哦</div></div>
            <div id="school-new3"><img src="img/ac3.jpg" alt=""><div id="school-new-word3">#“学媒杯”好新闻比赛开始征稿啦!#[酷]本次活动主题是“促莞工高水平,做莞工记录人”,活动时间从2016年3月28日到2016年5月26日。[爱你]本次活动面向东莞理工学院全体学生哦</div></div>
        </div>
        
        
    <div id="enroll-register">        <!-- 登录注册总界面 -->
        <div id="enroll">
            <div class="top-name">会员登录</div>
            <form name="form1" class="form-horizontal" action="#" method="post">
                  <div class="control-group">         <!-- 邮箱input总栏 -->
                    <label class="control-label" for="inputEmail">邮箱</label>
                    <div class="controls">
                        <i class="icon-user2"></i>
                        <input name="email" type="email" id="inputEmail" placeholder="Email">
                    </div>
                </div>

                <div class="control-group">             <!-- 密码input总栏 -->
                    <label class="control-label" for="inputPassword">密码</label>
                    <div class="controls">
                        <i class="icon-key"></i>
                         <input name="password" type="password" id="inputPassword" placeholder="Password">
                    </div>
                  </div>

                <div class="control-group">            <!-- 按钮总栏 -->
                    <div class="controls">
                        <label class="checkbox" style="margin:0 20px;">
                            <input type="checkbox"> Remember me
                          </label>
                          <a href="index-登录状态.html"><button type="submit" class="btn" onclick="return checkit();">Sign in</button></a>
                          <span class="tab-btn1"><a style="cursor:pointer">免费注册</a></span>
                    </div>
                  </div>
            </form>
        </div>
        <div id="register">
            <div class="top-name">新手注册</div>
            <form name="form2" class="form-horizontal" action="#" method="post">
                  <div class="control-group">         <!-- 邮箱input总栏 -->
                    <label class="control-label" for="inputEmail">邮箱</label>
                    <div class="controls">
                        <i class="icon-user2"></i>
                        <input name="email_r" type="email" id="inputEmail" placeholder="Email">
                    </div>
                </div>

                <div class="control-group">             <!-- 密码input总栏 -->
                    <label class="control-label" for="inputPassword">密码</label>
                    <div class="controls">
                        <i class="icon-key"></i>
                         <input name="password_r" type="password" id="inputPassword" placeholder="Password">
                    </div>
                    <label class="control-label" for="inputPassword">确认密码</label>
                    <div class="controls">
                        <i class="icon-key"></i>
                         <input name="test_password" type="password" id="inputPassword" placeholder="Password">
                    </div>
                  </div>

    <div class="radio">
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我是商家
        </label>
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">我是社团
        </label>
    </div>

                <div class="control-group" style="text-align:center">            <!-- 按钮总栏 -->
                    <div class="controls" style="margin:10px 0 0">
                          <button type="submit" class="btn">立即注册</button>
                    </div>
                    <span class="tab-btn2"><a style="cursor:pointer">已有账号可直接登录</a></span>
                  </div>
            </form>
        </div>        
        
    </div>
    </div>

    <div id="footer">
    <span><a href="">首页</a> <a href="">品牌介绍</a> <a href="">联系我们</a> ©2016 h 版权所有</span>
    </div>
</body>
    <script>
$(document).ready(function(){
    $(".tab-btn1").click(function(){
        $("#register").show(200);
        $("#register").css("right","0px");
        $("#enroll").css({"left":"-210px","display":"none"});
    });
    $(".tab-btn2").click(function(){
        $("#enroll").show(200);
        $("#enroll").css("left","0px");
        $("#register").css({"right":"-210px","display":"none"});
    });    
});

function checkit(){                 //判断用户登录时邮箱及密码是否为空
    if(form1.email.value==""){
        alert("请输入用户名或邮箱");
            form1.email.focus();
        return false;
    }
    if(form1.password.value==""){
        alert("请输入密码");
            form1.password.focus();
        return false;
    }
    return true;
}
    </script>    

</html>
回复
阅读 3.4k
2 个回答
✓ 已被采纳

你想 自动轮播?
如果你的代码和菜鸟上面一样的话 加下面这段代码应该就可以了
$("#myCarousel").carousel('cycle');

data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放。
在myCarousel加上data-ride="carousel"就可以。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏