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>

希望能够帮到大家，如果有什么需要可以留言！




				


				
时间： 2024-10-11 11:45:46 

		


		


	

	
	

		


		
Bootstrap 实现图片翻滚的相关文章


								

		

			

                基于bootstrap的图片轮播效果展示
			

		

		

									

				<!DOCTYPE html><html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,			

		

	

				

		

			

                利用bootstrap实现图片Carousel效果
			

		

		

									

				引入头文件: <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="jquery-3.3.1.js"></script> 开始写父级Div: <div id="carouselExampleIn			

		

	

				

		

			

                Bootstrap之图片展示界面Demo2
			

		

		

									

				代码:(使用模板引擎freemarker) <!DOCTYPE html> <html> <head> <title>图片</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="			

		

	

				

		

			

                Bootstrap  插入图片实例
			

		

		

									

				一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 http://www.poluoluo.com/jzxy/201203/162159.html另一种是:通过css背景属性添加 http://paranimage.com/css-background-attribute/ 居中方法:水平居中的text-align:center 和 margin:0 auto 极客学院例子http://www.jikexueyuan.com/course/656_3.html?s			

		

	

				

		

			

                bootstrap -- css -- 图片
			

		

		

									

				图片样式 .img-rounded:添加 border-radius:6px 来获得图片圆角 .img-circle:添加 border-radius:500px 来让整个图片变成圆形. img-circle优先级高于img-rounded <body> <img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-			

		

	

				

		

			

                AngularJS+ui.bootstrap实现图片轮播
			

		

		

									

				原地址:http://blog.csdn.net/yateswang/article/details/47751477 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href=&qu			

		

	

				

		

			

                bootstrap使用图片
			

		

		

									

				1. h-p-ol-li-dl 2.table-tr-th-td 3.tr 4.a-button-input 5.按钮大小原样式后面空格跟上-xx 6.img <script src="~/js/dist/js/jquery-1.11.0.js"></script> <link href="~/js/dist/css/bootstrap.min.css" rel="stylesheet" /> <scri			

		

	

				

		

			

                基于bootstrap的图片轮播功能
			

		

		

									

				插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script> HTML代码: <div id="pic			

		

	

				

		

			

                Bootstrap实现图片弹出放大
			

		

		

									

				前台HTML: <td><center><img style="height: 100px;width: 100px;" onmouseover="this.style.cursor='pointer';this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="<?php echo $v['pic_detail'];