Bootstrap 实现图片翻滚
今天给大家带来的是Bootstrap 实现的图片翻滚 效果图如下
点击左右箭头可以实现向左向右转动,这个功能在Bootstrap 官网和菜鸟教程上都有讲解,有点bootstrap基础的都能看明白 ,这里我就说一下容易忽视的地方,
1.在实现这个功能前需要加载 一下两个文件:
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
2. 如果Bootstrap自带的效果不能满足要求需要修改JS文件 那么就需要修改一下文件,按照需求修改样式即可
<link href="../js/css/bootstrap.css" rel="stylesheet">
贴一下我自己写的代码:样式是修改过的了。
<div id="carousel-example-generic" class="carousel" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active col-md-10 col-lg-offset-1" >
<img src="../img/beiing.jpg" alt="..." class="img-rounded col-md-2">
<img src="../img/shanghai.jpg" alt="..." class="img-rounded col-md-2">
<img src="../img/chaoyang.jpg" alt="..." class="img-rounded col-md-2">
<img src="../img/guangzhou.jpg" alt="..." class="img-rounded col-md-2">
<img src="../img/dalian.jpg" alt="..." class="img-rounded col-md-2">
<img src="../img/shenyang.jpg" alt="..." class="img-rounded col-md-2">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
</div>
希望能够帮到大家,如果有什么需要可以留言!
Bootstrap 实现图片翻滚的更多相关文章
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- jq实现鼠标经过图片翻滚效果
短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果! html结构: <ul class="list" ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- Bootstrap之图片展示界面Demo2
代码:(使用模板引擎freemarker) <!DOCTYPE html> <html> <head> <title>图片</title> ...
- Bootstrap之图片展示界面Demo
代码:(使用模板引擎freemarker) <!DOCTYPE html> <html> <head> <title>图片</title> ...
- 利用bootstrap实现图片Carousel效果
引入头文件: <link rel="stylesheet" href="bootstrap.min.css"> <link rel=" ...
- ⑦bootstrap按钮 图片 辅助使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap -- css -- 图片
图片样式 .img-rounded:添加 border-radius:6px 来获得图片圆角 .img-circle:添加 border-radius:500px 来让整个图片变成圆形. img-ci ...
- BootStrap实现图片轮播
<div class="container"> <div data-ride="carousel" id="carou ...
随机推荐
- 编程源自生活:抽象 -> 生活中的洗头问题
设计背景: 我:头上的油揩给了手,手接触洗手液.洗手液伤头皮,这样头皮就不会和洗手液接触了. 具体执行过程描述: 1.手揩油 -> 2.取液体 3.->洗手 我:这是什么设计模式 ...
- 解决Dubbo无法发布被事务代理的Service问题
在HelloServiceImpl类上加入@Transactional注解后,虽然工程可以正常跑起来,但是通过dubbo管理控制台可以看到里面并没有服务发布上来. 此时启动服务提供者和服务消费者,并访 ...
- 039 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 01 循环结构概述
039 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 01 循环结构概述 本文知识点:循环结构概述 循环结构主要内容 while 循环 do-whiile ...
- 【题解】[ZJOI2009]狼和羊的故事
题目戳我 \(\text{Solution:}\) 显然思路,把所有羊看成一个源点,所有狼看成一个汇点,格子之间连容量为\(1\)的边,直接跑最小割. 技巧: 注意到篱笆不能把羊给割掉,狼同理.所以, ...
- 使用Appium进行iOS的真机自动化测试
windows不支持appium连接ios,只适用于mac 使用Appium进行iOS的真机自动化测试 安装类库 Homebrew 如果没有安装过Homebrew,先安装[ homebrew ] np ...
- 编程体系结构(07):JavaEE之Web开发
本文源码:GitHub·点这里 || GitEE·点这里 一.基础概念 1.CS与BS架构 CS架构模式 客户端/服务器(Client/Server)模式,既要编写服务器端程序,也要开发客户端程序,软 ...
- JVM 第二篇:垃圾收集器以及算法
本文内容过于硬核,建议有 Java 相关经验人士阅读. 0. 引言 一说到 JVM ,大多数人第一个想到的可能就是 GC ,今天我们就来聊一聊和 GC 关系最大的垃圾收集器以及垃圾收集算法,希望能通过 ...
- Java之格林威治时间格式转换成北京时间格式
Java之格林威治时间格式转换成北京时间格式 package com.mtons.mblog; import java.text.ParseException; import java.text.Si ...
- Flink深入浅出: 应用部署与原理图解(v1.11)
往期推荐: Flink深入浅出:内存模型 Flink深入浅出:JDBC Source从理论到实战 Flink深入浅出:Sql Gateway源码分析 Flink深入浅出:JDBC Connector源 ...
- 面试题____pthon__002(法本_) 阿里
1.描述一下您负责的业务中最复杂的业务(可以从业务是为了解决用户的什么问题切入).这个最复杂的业务中,最复杂的模块是什么,这个模块的主要功能详细描述一下.这个模块,采用了什么样的测试手段保障质量?2. ...