javascript - 焦点自动滚动图，当我手动点击滚动后才自动滚动，用的是Bootstrap 轮播（Carousel）插件
本文介绍了javascript - 焦点自动滚动图，当我手动点击滚动后才自动滚动，用的是Bootstrap 轮播（Carousel）插件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
以下是我的代码，求解答，到底是哪里冲突了，还是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>解决方案
你想 自动轮播？
如果你的代码和菜鸟上面一样的话 加下面这段代码应该就可以了$("#myCarousel").carousel('cycle');
这篇关于javascript - 焦点自动滚动图，当我手动点击滚动后才自动滚动，用的是Bootstrap 轮播（Carousel）插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
