bootstrap 轮播插件学习心得

Web前端 新民 2724℃ 已收录 5评论

一开始,我按照官网的方式写了个轮播效果:结果在火狐和IE浏览器下不能正常轮播:

找了半天原因是我少加了个属性:data-ride=”carousel”

源码如下:

     <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		.ca{
			  margin: 31px auto;
  			  text-align: center;
  			  width: 185px;
  			  background: #eee;
  			  height: 314px;
		}
		img{  padding: 0 10px;   padding-bottom: 41px;}
		a{padding: 10px;}
	</style/>
	<script type="text/javascript" src="js/jquery.min.js?v201509091705" ></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js?v201509101151"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css?v201509101151">
	
  </head>
  
  <body>
    <div id="myCarousel" class="carousel slide ca" data-ride="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>
    		<li data-target="#myCarousel" data-slide-to="3"></li>
    		<li data-target="#myCarousel" data-slide-to="4"></li>
    	</ol>
    	
    	<div class="carousel-inner" style="top: 10px;   height: 284px;">
    		<div class="item active">
    			<img src="cxscroll/images/zsgd1.jpg" />
    			<div class="carousel-caption">中国科技</div>
    		</div>
    		<div class="item">
    			<img src="cxscroll/images/zsgd2.jpg" />
    			<div class="carousel-caption">财经世界</div>
    		</div>
    		<div class="item">
    			<img src="cxscroll/images/zsgd3.jpg" />
    			<div class="carousel-caption">社会教育</div>
    		</div>
    		<div class="item">
    			<img src="cxscroll/images/zsgd4.jpg" />
    			<div class="carousel-caption">杂志报刊</div/>
    		</div>
    		<div class="item">
    			<img src="cxscroll/images/zsgd5.jpg" />
    			<div class="carousel-caption">娱乐世界</div/>
    		</div>
    	</div>
    	 <!-- 轮播(Carousel)导航  carousel-control-->
   		<a class="left"  href="#myCarousel" data-slide="prev">‹</a>
   		<a class="right"  href="#myCarousel" data-slide="next">›</a>
    </div>
  </body>
</html>

效果如下:

QQ图片20150910153113

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.snowruin.com/?p=1489
喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)条精彩评论。
  1. [伸舌头][哭死啦][没听见]2015天猫双11活动来啦!各大会场活动页面就来→ http://20151111.xyz
    若林蕾2015-11-10 22:41 回复| unknow| unknow
  2. 不错哈
    osblog.net2015-11-09 13:49 回复| unknow| unknow
  3. 把一切平凡的事做好即不平凡,把一切简单的事做好即不简单。
    韩美女车模2015-10-06 14:14 回复| unknow| unknow
    • 新民
      谢谢,请多多关注
      新民2015-10-07 10:31 回复| Google Chrome 43.0.2357.81| Windows 7 x64