bootstrap轮播图控制速度

2017-05-03 15:19:49 qq_15267341 阅读数 854
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

效果图如下:
这里写图片描述


 <div class="carousel slide" id="carousel2">
                            <ol class="carousel-indicators">
                                <li data-slide-to="0" data-target="#carousel2" class="active"></li>
                                <li data-slide-to="1" data-target="#carousel2"></li>
                                <li data-slide-to="2" data-target="#carousel2" class=""></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img alt="image" class="img-responsive" src="img/p_big1.jpg">
                                    <div class="carousel-caption">
                                        <p>This is simple caption 1</p>
                                    </div>
                                </div>
                                <div class="item ">
                                    <img alt="image" class="img-responsive" src="img/p_big3.jpg">
                                    <div class="carousel-caption">
                                        <p>This is simple caption 2</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img alt="image" class="img-responsive" src="img/p_big2.jpg">
                                    <div class="carousel-caption">
                                        <p>This is simple caption 3</p>
                                    </div>
                                </div>
                            </div>
                            <a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">
                                <span class="icon-prev"></span>
                            </a>
                            <a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">
                                <span class="icon-next"></span>
                            </a>
                        </div>


备注:
如果把carousel-caption这个类修改为text-center,效果图变成下面:


这里写图片描述



备注:

carousel-control             控制左右箭头的显示与否
data-slide                   控制轮播图的动作
carousel-inner 配合item       包含了很多轮播图
carousel-indicators          底部的一排圆圈
id                           具体代表哪个轮播图

FR:海涛高软(QQ技术交流群:386476712)

2018-01-24 17:56:37 c5211314963 阅读数 3372
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

有时候需要图片消失速度不是那么快,但是bootstrap默认是0.6s,真是太快了,这么改

1.在bootstrap.min.css中找到下面代码(可直接搜索transform-3d一下子找到)

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;

上面的.6s就是0.6s的意思,太快了,改为2s,千万不要加”.修改后如下

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform 2s ease-in-out;
         -o-transition:      -o-transform 2s ease-in-out;
            transition:         transform 2s ease-in-out;

2018-09-25 12:05:35 astroskyi 阅读数 8804
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

BootStrap轮播图官方代码

<!--data-ride设置图片切换方式为滑动 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 设置轮播图的数量和顺序-->
  <!--data-target的值应与上面的id值对应 -->
  <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 class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- 控制图标 -->
  <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>

实现轮播图时间间隔改变的两种方式

  1. data-ride后面加上一个属性data-interval=“millisecond”,其中,millisecond为需要设置的毫秒数,如下:
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
    
  2. 使用JavaScript语句实现:
    官网给出的代码是:
    $('.carousel').carousel({
    interval: 2000
    });
    
    直接使用这个代码无法实现,应在该方法前面加上一个函数表达式,如下:
    $(function(){
    	$('#carousel-example-generic').carousel({interval:1000});
    });
    
2018-12-19 11:03:55 qq_39905917 阅读数 5132
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

BootStrap实现轮播图的自动播放和设置播放间隔时间

参考链接:https://blog.csdn.net/rui512777/article/details/52670173?utm_source=blogxgwz5
轮播图代码如下:

<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 820px; position: relative;">
	<h2 id="shouye">首页</h2>
		<!--轮播区域-->
			<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
			<!--轮播指标-->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1" ></li>
				<li data-target="#myCarousel" data-slide-to="2" ></li>
				<li data-target="#myCarousel" data-slide-to="3" ></li>
			</ol>
			<!--轮播指标-->
			<!--轮播项目-->
				<div class="carousel-inner" style="height: 750px;">
					<div class="item active" >
						<img src="img/00.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/01.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/2.jpg" alt="First slide"  >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/3.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					</div>
					<!--轮播控制器-->
					<a class="carousel-control left" href="#myCarousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
					</a>
					<a class="carousel-control right" href="#myCarousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</a>
					<!--轮播控制器-->
			  </div>
</div>

设置自动播放:data-ride=“carousel”
设置播放的时间间隔(这里设置的时间间隔是2000毫秒):data-interval=“2000”

2019-09-17 22:50:43 honghaiash 阅读数 58
  • 采用全局过滤器ExceptionFilter实现AOP

    能够说出Rancher软件的作用,能够在Rancher中部署微服务 能够说出influxDB的作用,能够创建数据库、用户、赋予权限 能够说出cAdvisor 的作用,能够创建容器与influxDB连接 能够说出Grafana 的作用,能够使用Grafana...

    71人学习 田果果
    免费试看

 

bootstrap的使用让页面开发的速度变得更快,在这里就着重解析一下bootstrap3里轮播图模块,和不同情况(屏幕宽度)下轮播图图片大小如何做到响应式切换.

下面代码即是bootstrap3轮播图模块解析:

 


 
  1. <section id="banner">

  2. <!-- 当同一个页面中,同时存在多个轮播图时,不同的轮播图以及他的控制按钮,需要有相对应id值 -->

  3. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  4. <!-- 控制翻页的圆点 -->

  5. <ol class="carousel-indicators">

  6. <!-- data-target 指向被控制的轮播图 -->

  7. <!-- data-slide-to 表示点击这个点时,需要跳转到第几页 -->

  8. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

  9. <li data-target="#carousel-example-generic" data-slide-to="1"></li>

  10. <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  11. <li data-target="#carousel-example-generic" data-slide-to="3"></li>

  12. </ol>

  13.  
  14. <!-- 轮播图内部显示的内容 -->

  15. <div class="carousel-inner" role="listbox">

  16. <!-- 一个item表示一页 -->

  17. <!-- active表示当前正在显示的一页 -->

  18. <div class="item active" >

  19. <!--<img src="./img/slide_01_2000x410.jpg" alt="...">-->

  20. <!-- carousel-caption 轮播图中的字幕 -->

  21. <!-- 显示在轮播图中心偏下的位置 -->

  22. <!--<div class="carousel-caption">-->

  23. <!--ABCDEFG-->

  24. <!--</div>-->

  25. </div>

  26. <div class="item" >

  27. </div>

  28. <div class="item" >

  29. </div>

  30. <div class="item" >

  31. </div>

  32. </div>

  33. <!-- Controls 左右的翻页箭头 -->

  34. <!-- 翻页控制中,href属性指向所控制的轮播图 -->

  35. <!-- data-slide 表示翻页的方向 -->

  36. <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

  37. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

  38. <span class="sr-only">Previous</span>

  39. </a>

  40. <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

  41. <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

  42. <span class="sr-only">Next</span>

  43. </a>

  44. </div>

  45. </section>

 

 

轮播图的图片需要添加到<div class="item">中去

那么添加图片的方式有几种呢?

这里提供几种可行的图片添加方式:

方法1:最简单的办法

div中添加 <img> 标签来实现

 


 
  1. <div class="item">

  2. <img src="./img/slide_02_2000x410.jpg" alt="...">

  3. <div class="carousel-caption">

  4. </div>

  5. </div>

缺点:

 

这种方法需要设置较为复杂的CSS样式来让图片超过屏幕宽度时让图片居中显示并overflow:hidden

 

方法2:设置div的背景来实现

css代码:

 

            background: url('图片.jpg') center center no-repeat;

 

并设置background-size:cover 根据短的边填满图片

优点是设置比较简单,缺点也很明显,需要给每一个div添加图片地址,后续修改也比较麻烦.

图片是获取的内容,在网页设计中也不应该由css来获取,应该通过逻辑来获取图片的地址
 

方法3:当你的图片名有严格的名称如 

slide_00_2000x410.jpg

slide_01_2000x410.jpg

slide_02_2000x410.jpg

slide_03_2000x410.jpg

slide_00_640x360.jpg

slide_01_640x360.jpg

slide_02_640x360.jpg

 

slide_03_640x360.jpg

这种条件下可以通过JS拼接 <div class= "item">的 background-image地址来实现

JS代码如下:


 
  1. $(function () {

  2. var itemArr = $(' .item');

  3. console.log(itemArr);

  4. // 根据不同的item,设置不同的图片

  5. itemArr.each(function (index,item) {

  6. //通过index,来构建图片的url

  7. var imgURL = './img/slide_0'+index +'_2000x410.jpg';

  8. //设置背景图片的URL地址

  9. item.style.backgroundImage = "url('" + imgURL +"')";

  10. })

  11. });



但是方法3 的局限性太大了,随便点开一个门户网站查看它的轮播图图片地址都时一堆"乱码"

 

方法4:使用来data-image 来巧妙的获取来图片的路径,从而避开了对图片地址的依赖

首先需要设置div:

 


 
  1. <div class="item" data-image="./img/slide_02_2000x410.jpg">

  2. <!--<img src="./img/slide_02_2000x410.jpg" alt="...">-->

  3. <div class="carousel-caption">

  4. </div>

  5. </div>


JS代码:

 

 


 
  1. $(function () {

  2. //轮播图片的设置

  3. var itemArr = $('.item');

  4. itemArr.each(function (index, item) {

  5. //获取data-image里面的数据

  6. var imageURL = item.dataset.image;

  7. item.style.backgroundImage = "url('" + imageURL +"')";

  8. });

  9. });

 

 

这样就可以方便的通过修改data-image的值来更换页面,整体的代码也更加干练.

--------------------------------------------------------------------------------------------------------------------

响应式页面的轮播图的图片也应该是响应式的,大屏幕轮播图用大图,小平面轮播图用小图,下面的代码可以通过方法4实现轮播图的响应式

div设置:

 


 
  1. <div class="item" data-large-image="./img/slide_03_2000x410.jpg" data-small-image="./img/slide_03_640x340.jpg">

  2. <!--<img src="./img/slide_03_2000x410.jpg" alt="...">-->

  3. <div class="carousel-caption">

  4. </div>

  5. </div>

JS代码:


 
  1. //当屏幕大小发生变化是时,根据宽度来改变图片的大小

  2. //窗口宽度大小便是时触发的事件

  3. $(window).on('resize',function () {

  4. //获取当前屏幕额的宽度

  5. var screenWidth = $(window).width();

  6. console.log(screenWidth);

  7. var itemArr = $('#banner > .carousel > .carousel-inner> .item');

  8. itemArr.each(function (index, item) {

  9. //获取data-image里面的数据

  10. var largeImageURL = item.dataset.largeImage;

  11. var smallImageURL = item.dataset.smallImage;

  12. //当屏幕大小小于768时用640*360大小的图片

  13. if(screenWidth<768){

  14. item.style.backgroundImage = "url('" + smallImageURL +"')";

  15. //根据屏幕宽度调整图片高度

  16. var imageHeight = screenWidth /640 *360;

  17. item.style.height =imageHeight +"px";

  18. }else {

  19. item.style.backgroundImage = "url('" + largeImageURL +"')";

  20. item.style.height='410px';

  21. }

  22.  
  23. });

  24.  
  25. }).trigger('resize'); //让窗口打开的时候就执行一次

这样设置之后轮播图的大小就会根据页面宽度来响应啦.

BootStrap轮播

阅读数 36

没有更多推荐了,返回首页