bootstrap实现轮播图
来源：互联网 发布：linux设置用户密码 编辑：程序博客网 时间：2024/06/09 13:46
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
/*第一步，在顶部head标签里引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。*/
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”jquery.min.js”></script>
<script src=”bootstrap.min.js”></script>
<script type=”text/javascript”>
$(‘#slidershow’).carousel({
interval : 200,
pause : ‘hover’,
wrap : false,
});
</script>
</head>
<body>
/*第二步，添加轮播图片的容器。为了便于查看，在最外边添加一个“container”的div，再加一个子div，类名为carousel，并且给这个容器定义一个名为“slidershow”的ID，方便后面的data属性来声明触发。*/
<div class=”container”>
/*为 ID为“slidershow ”的div添加 “slide”类，作用是使图片与图片的切换具有平滑感。*/<div id=”slidershow” class=”carousel slide” style=”width:900px”>
/*第三步，设计轮播图片的计数器。在容器内部添加计数器，加上一个名为“carousel-indicators”的类，用于显示图片的播放顺序。其中，data-target=”#slidershow” ，用于触发声明事件的目标。*/
<ol class=”carousel-indicators”>
<li data-target=”#mycarousel active” data-slide-to=”0”></li>
<li data-target=”#mycarousel” data-slide-to=”1”></li>
<li data-target=”#mycarousel” data-slide-to=”2”></li>
</ol>
/*第四步，设计轮播图片的播放区域。这个区域主要用来放轮播的图片。加一个名为“carousel-inner”的类，并放置在carousel容器中，再加一个名为“item”的容器来放置每张轮播图片。*/
<div class=”carousel-inner”>
/*为了让用户体验更加友好，在设计轮播图片的播放时，在第一张图片加一个“active”类，默认页面加载时显示第一张图片。*/
<div class=”item active”>
<img src=”img/slide1.png”>
</div>
<div class=”item”>
<img src=”img/slide2.png”>
</div>
<div class=”item”>
<img src=”img/slide3.png”>
</div>
</div>
/*第五步，设计轮播图片的前后图标控制器。我们平时看到的轮播图会有一个向前播放和向后播放的控制器。在Carousel中加一个控制向前和一个控制向右的a标签，并添加名为“carousel-control”的类，以及left和right类。其中left表示向前播放，right表示向后播放。*/
<a href=”#slidershow” data-slide=”prev” class=”carousel-control-left”>‹</a>
<a href=”#slidershow” data-slide=”next” class=”carousel-control-right”>›</a>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset=”utf-8”>
/*第一步，在顶部head标签里引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。*/
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”jquery.min.js”></script>
<script src=”bootstrap.min.js”></script>
<script type=”text/javascript”>
$(‘#slidershow’).carousel({
interval : 200,
pause : ‘hover’,
wrap : false,
});
</script>
</head>
<body>
/*第二步，添加轮播图片的容器。为了便于查看，在最外边添加一个“container”的div，再加一个子div，类名为carousel，并且给这个容器定义一个名为“slidershow”的ID，方便后面的data属性来声明触发。*/
<div class=”container”>
/*为 ID为“slidershow ”的div添加 “slide”类，作用是使图片与图片的切换具有平滑感。*/<div id=”slidershow” class=”carousel slide” style=”width:900px”>
/*第三步，设计轮播图片的计数器。在容器内部添加计数器，加上一个名为“carousel-indicators”的类，用于显示图片的播放顺序。其中，data-target=”#slidershow” ，用于触发声明事件的目标。*/
<ol class=”carousel-indicators”>
<li data-target=”#mycarousel active” data-slide-to=”0”></li>
<li data-target=”#mycarousel” data-slide-to=”1”></li>
<li data-target=”#mycarousel” data-slide-to=”2”></li>
</ol>
/*第四步，设计轮播图片的播放区域。这个区域主要用来放轮播的图片。加一个名为“carousel-inner”的类，并放置在carousel容器中，再加一个名为“item”的容器来放置每张轮播图片。*/
<div class=”carousel-inner”>
/*为了让用户体验更加友好，在设计轮播图片的播放时，在第一张图片加一个“active”类，默认页面加载时显示第一张图片。*/
<div class=”item active”>
<img src=”img/slide1.png”>
</div>
<div class=”item”>
<img src=”img/slide2.png”>
</div>
<div class=”item”>
<img src=”img/slide3.png”>
</div>
</div>
/*第五步，设计轮播图片的前后图标控制器。我们平时看到的轮播图会有一个向前播放和向后播放的控制器。在Carousel中加一个控制向前和一个控制向右的a标签，并添加名为“carousel-control”的类，以及left和right类。其中left表示向前播放，right表示向后播放。*/
<a href=”#slidershow” data-slide=”prev” class=”carousel-control-left”>‹</a>
<a href=”#slidershow” data-slide=”next” class=”carousel-control-right”>›</a>
</div>
</div>
</body>
</html>
阅读全文
0 0
- BootStrap实现轮播图
- bootstrap实现轮播图
- bootstrap 实现轮播图
- bootstrap 轮播图实现大小自适应
- bootstrap下实现轮播图的响应式
- bootstrap 多模态框实现
- bootstrap实现模态框实例
- 基于bootstrap实现分页
- bootstrap实现loading
- bootStrap table实现分页
- Bootstrap实现自定义进度条
- bootstrap实现导航等
- Bootstrap实现遮罩层
- Bootstrap实现登陆表单
- 实现 Bootstrap 基本布局
- 实现 Bootstrap 基本布局
- Bootstrap实现手风琴效果
- bootstrap 实现模态框
- PowerDesigner(十)-设置表字符集和存储引擎
- 评论
- vue+Java后端进行调试时如何解决跨域问题
- Pyhton 学习笔记之 bin2hex & hex2bin
- 用Myeclipse在web项目中发布WebService
- bootstrap实现轮播图
- 解决ssh 创建对象空指针问题
- win10下搭建GitLab服务器
- CSDN markdown编辑器输入空格
- 安卓抓包工具charles安装使用
- 事务的隔离级别
- DateUtils.parseDate的缺陷
- Django知识点汇总
- 第十三天 PHP运算符
