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···当 ...
随机推荐
- LightOJ 1123 Trail Maintenance
题意:n个城市m天.每一天修一条道路,输出当前天数的最小生成树,但是这里有一个条件,就是说最小生成树必须包括全部n个城市,否则输出-1 思路:边数有6000如果每一天跑一次最小生成树的话就接近O(m^ ...
- 安装win下的Anaconda ----针对python3.6.4版本
我的python版本是3.6.4, Anaconda下载地址: Anaconda官网:https://repo.anaconda.com/archive/ 清华大学镜像站:https://mirror ...
- Python--day63---出版社增删查改开发流程回顾
1,第一步:对应url 2,第二步:views.py 3,第三步:views.py中的函数中利用ORM去数据库中操纵数据 4,第四步:Django模板语言实现字符串替换 5,第五步:取出publish ...
- visualStudio 无法登陆
如果遇到 visualStudio 无法登陆,可以看下我的方法,可能有用 尝试关闭代理 打开设置.网络.代理,关了它,试试 如果遇到下面的问题: 我们无法刷新此账户的凭据 No home tenant ...
- linux设备驱动文件结构
struct file, 定义于 <linux/fs.h>, 是设备驱动中第二个最重要的数据结构. 注意 file 与用户空间程序的 FILE 指针没有任何关系. 一个 FILE 定义在 ...
- linux加载和卸载模块
模块建立之后, 下一步是加载到内核. 如我们已指出的, insmod 为你完成这个工作. 这个 程序加载模块的代码段和数据段到内核, 接着, 执行一个类似 ld 的函数, 它连接模块中 任何未解决的符 ...
- 2019-8-31-C#-获取-PC-序列号
title author date CreateTime categories C# 获取 PC 序列号 lindexi 2019-08-31 16:55:58 +0800 2018-7-30 10: ...
- 闲来无事写一个jquery计算器,没有进行封装......
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- HTML自制计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- poj2826 An Easy Problem?!(计算几何)
传送门 •题意 两根木块组成一个槽,给定两个木块的两个端点 雨水竖直下落,问槽里能装多少雨水, •思路 找不能收集到雨水的情况 我们令线段较高的点为s点,较低的点为e点 ①两条木块没有交点 ②平行或重 ...