bootstrap:图片轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
<title>图片轮播</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body style="padding-left: 350px; padding-top: 150px"> <div class="carousel slide" data-toggle="carousel" id="page" style="width: 500px;" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active"><img src="https://i.loli.net/2018/09/13/5b99ce0aad0d5.jpg" style="width: 500px; height: 282px;"></div>
<div class="item"><img src="https://i.loli.net/2018/09/13/5b99e2dbdcfee.jpg" style="width: 500px;height: 282px;"></div>
<div class="item"><img src="https://i.loli.net/2018/09/13/5b99e30fc8278.jpg" style="width: 500px;height: 282px;"></div>
<div class="item"><img src="https://i.loli.net/2018/09/13/5b99e32cc27e2.jpg" style="width: 500px;height: 282px;"></div>
</div>
<a href="#page" class="carousel-control left" data-slide="prev"></a>
<a href="#page" class="carousel-control right" data-slide="next"></a>
<ul class="carousel-indicators">
<li data-target="#page" data-slide-to="0" class="active"></li>
<li data-target="#page" data-slide-to="1"></li>
<li data-target="#page" data-slide-to="2"></li>
<li data-target="#page" data-slide-to="3"></li>
</ul>
</div>
</body>
</html>
示例图:
bootstrap:图片轮播的更多相关文章
- bootstrap 图片轮播效果
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- bootstrap图片轮播
<div class="carousel slide" id="myCarsousel" style="width:790px;"&g ...
- 图片轮播(bootstrap)与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...
- 基于bootstrap的轮播广告页,带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
随机推荐
- protobuf DNK下的编译
protobuffer 编译配置 mkdir -p ./cmake/build cd ./cmake/build cmake \ -Dprotobuf_BUILD_SHARED_LIBS=OFF \ ...
- 如何查看redis内存使用情况
https://jingyan.baidu.com/article/2c8c281dbd079f0008252a0f.html Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以 ...
- js获取dom节点
var s= document.getElementById("test");del_ff(s); //清理空格var chils= s.childNodes; //得到s的全部子 ...
- input submit标签的高度和宽度与input text的差异
<input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值. <input type="s ...
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Python--day66--内容回顾
3,python中的大小比较和js中的大小比较规则: python中a>b>c,就是先比较a>b,然后再比较b>c,都为true的话就返回true: js中的a>b> ...
- H3C 基本ACL
- laydate type=time/datetime/date 开始时间和结束时间的输入限制
最近项目中使用了laydate插件,需要限制开始时间和结束时间的输入 1.type=date 要求:周期开始时间和周期结束时间以天为单位,结束时间不能早于开始时间,可以是同一天. 周期开始时间:< ...
- 20191029校内ACM部分题解
20191029校内ACM部分题解 https://codeforces.com/group/32W4q7bPme/contest/257710 B数学 给定一个在\([0,1]\)等概率随机区间的随 ...
- 微软软件开发技术二十年回顾-.NET框架篇
六. .NET框架篇 .NET是微软自从发布Windows 3.0以来最为激动人心的新技术,是微软战略上为下一个十年对服务器和桌面软件工程的第一步,是微软的一场世纪大豪赌.对于.NET,微软的定义是, ...