Bootstrap插件之Carousel轮播效果（2015年-05月-21日）

最新推荐文章于 2022-05-09 12:40:39 发布
最新推荐文章于 2022-05-09 12:40:39 发布
阅读量299 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Dreyer/p/4533028.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--引入boorstrap的css文件-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--在引入bootstrap的js文件之前 引入jquery文件，因为bootstrap是依赖于jquery的 -->
<script src="jquery-1.11.2.min.js"></script>
<!--引入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<title>carousel轮播效果</title>
<script>
/**
         * 幻灯播放效果的选项
         */
$(function () {
$(".carousel").carousel({
interval:3000,      //设置轮播切换速度
keyboard:true,   //设置是否启用鼠标控制图片轮播切换
pause:"hover",   //鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap:true      //设置是否循环播放
});
        });

/**
         *以下是一些常用的方法
         */
$(function () {
//开始轮播
$("#start").click(function() {
$("#carousel-example-generic").carousel('cycle');
            });

//暂停播放
$("#pause").click(function() {
$("#carousel-example-generic").carousel('pause');
            });

//上一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('prev');
            });

//下一张
$("#prev").click(function() {
$("#carousel-example-generic").carousel('next');
            });

//跳至第三张（下标从0开始）
$("#toThree").click(function() {
$("#carousel-example-generic").carousel(2);
            });

        });
</script>
</head>
<body>
<!--data-ride="carousel"属性用于控制是否在页面加载时就开始播放动画 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!--
    轮播的指标（下方的小圆点）
    使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
     -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- 轮播的项目，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 -->
<div class="carousel-inner" role="listbox">
<!--class=item属性的div中一定要有一个div的class属性为active，不然轮播项目不可见 -->
<div class="item active">
<img src="images/pic1.png" alt="..." style="width: 100%;height: 500px;">
<!--下面的div中可以放置任何我们想放置的内容 -->
<div class="carousel-caption">
<h1>First slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>
<div class="item">
<img src="images/pic2.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Second slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

<div class="item">
<img src="images/pic3.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Third slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

<div class="item">
<img src="images/pic4.png" alt="..." style="width: 100%;height: 500px;">
<div class="carousel-caption">
<h1>Fourth slide label</h1>
<p>Some content in this you can write</p>
</div>
</div>

</div>

<!--
    轮播的控制导航
    data-slide：接受prev、next关键字，用于控制幻灯片相对于当前的位置
     -->
<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>
<!--控制按钮 -->
<div style="text-align: center;">
<input type="button" class="btn btn-default" id="start" value="开始"/>
<input type="button" class="btn btn-default" id="pause" value="暂停"/>
<input type="button" class="btn btn-default" id="prev" value="上一个"/>
<input type="button" class="btn btn-default" id="next" value="下一个"/>
<input type="button" class="btn btn-default" id="toThree" value="跳至第三个"/>
</div>

</body>
</html>
 
 
 
 
效果图：
 
 
 
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/Dreyer/p/4533028.html

                

        

        




    

  


    

      

        

            

              
                
                  dizhouna1906
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Bootstrap学习笔记--插件之Carousel插件轮播图片，模态插件，提示插件，滚动监听插件，Affix插件

				
			

			

				

					qq_38409944的博客
				

				

					05-28
					
					1163
					
				

			

		

		

			
				
Carousel插件：   轮播插件。 
是一个通过元素循环的组件，如旋转木马（幻灯片）

插件可以单独包含（使用Bootstrap“carousel.js”文件），或者一次全部使用（使用“bootstrap.js”或“bootstrap.min.js”）。

注意： 
在Internet Explorer 9及更早版本中不被正确支持（因为它们使用CSS3转换和动画来实现幻灯片效果

举例：

 ...

			
		

	



                

              
                



	

		

			

				
					
Bootstrap实现基于carousel.js框架的轮播图效果

				
			

			

				

					11-29
				

			

		

		

			
				
本文实例为大家分享了Bootstrap轮播图效果展示的具体代码，供大家参考，具体内容如下
声明式触发需要使用到的几个data-*属性
1.data-ride：作用在最外层容器上，固定值:carousel
2.data-target：作用在class=carousel-indicators的每个子元素li上面，标注对那个元素进行点击轮播
3.data-slide：作用在前翻页和后翻页的两个a链接上，prev表示前翻页，next表示后翻页
4.data-slide-to：作用在class=carousel-indicators的每个子元素li上面，标注对应的li元素对应的图片动画帧的下标，从0开始

			
		

	



                


  
              

                


	

		

			

				
					
jQuery轮播效果（Carousell）

				
			

			

				

					chenmo2001的博客
				

				

					06-07
					
					2973
					
				

			

		

		

			
				
jQuery轮播效果（Carousell）

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JavaScript构建---内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图分浏览控制和指令支持。
在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态。窗口最小化时），轮播效果控件会停止运动，从而节省性能。



用法
通过数据属性
使用数据属性可以轻松控制转盘的位置。Data-slide接受关键字，p...

			
		

	





	

		

			

				
					
利用bootstrap的carousel.js实现轮播图动画

				
			

			

				

					weixin_30701521的博客
				

				

					12-20
					
					445
					
				

			

		

		

			
				
前期准备：
1.jquery.js。
2.bootstrap的carousel.js。
3.bootstrap.css。
 如果大家不知道在哪下载，可以联系小颖，小颖把这些js和css可以发送给你。
一起来看代码吧：
小颖画的页面比较丑，希望大家不要介意哦嘻嘻
效果图：

html+js：

<!DOCTYPE html>
<html&g...

			
		

	



		

			
		



	

		

			

				
					
Bootstrap 轮播图（Carousel）插件

				
			

			

				

					
				

				

					02-05
					
					121
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <link rel="icon" type="image/x-icon" href="../img/favicon.ic...

			
		

	





	

		

			

				
					
全面解析Bootstrap中Carousel轮播的使用方法

				
			

			

				

					09-02
				

			

		

		

			
				
主要为大家详细的介绍了Bootstrap中Carousel的使用方法，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
react-bootstrap-carousel:React部分自举轮播

				
			

			

				

					05-13
				

			

		

		

			
				
react-bootstrap-carousel  该项目支持使用构建的轮播组件。 安装 npm i --save react-bootstrap-carousel 入门 import ReactBootstrapCarousel from "react-bootstrap-carousel" ; import "bootstrap/dist/css/...

			
		

	





	

		

			

				
					
BootStrap中jQuery插件Carousel实现轮播广告效果

				
			

			

				

					12-29
				

			

		

		

			
				
轮播广告在网站中的应用实在是太常见了，下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果，下图为最终效果：  具体实现方法请看下面的代码：  <div class=carousel data-ride=carousel id=carousel ...

			
		

	





	

		

			

				
					
Bootstrap 轮播（Carousel）插件

				
			

			

				

					weixin_45786214的博客
				

				

					11-21
					
					449
					
				

			

		

		

			
				
简介：
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

			
		

	





	

		

			

				
					
bootstrap轮播图

				
			

			

				

					qq_36943809的博客
				

				

					12-18
					
					227
					
				

			

		

		

			
				
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-gen...

			
		

	





	

		

			

				
					
用Bootstrap的Carousel做幻灯片尝试详解

				
			

			

				

					
				

				

					01-15
					
					380
					
				

			

		

		

			
				
用Bootstrap的Carousel做幻灯片尝试详解



window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[...

			
		

	





	

		

			

				
					
bootstrap轮播图carousel插件

				
			

			

				

					weixin_34418883的博客
				

				

					05-09
					
					291
					
				

			

		

		

			
				
一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图）


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

			
		

	





	

		

			

				
					
python测试开发django-191.Bootstrap3 轮播图（Carousel）

				
			

			

				

					qq_27371025的博客
				

				

					05-09
					
					1280
					
				

			

		

		

			
				
前言
Bootstrap3 实现轮播图滚动显示
轮播图（Carousel）
只需替换成自己本地图片/static/a1.png即可实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 css -->
    <link rel="stylesheet" t

			
		

	





	

		

			

				
					
使用carousel.js实现轮播效果

				
			

			

				

					圆野的博客
				

				

					09-12
					
					6815
					
				

			

		

		

			
				
//引入文件

<script type="text/javascript" src="js/carousel.js"></script>

//html代码

 <div id="carousel1" class="carousel-content">
 <ul class="carousel">
 &lt...

			
		

	





	

		

			

				
					
关于bootstarp的Carousel左右切换按钮背景颜色的去掉方法

				
			

			

				

					qingluoII的博客
				

				

					07-20
					
					4998
					
				

			

		

		

			
				
在最近的项目中，用到了bootstarp的Carousel，但是却发现他左右两边有个灰色的阴影存在，让人看起来很别扭，百度完之后也没有找到解决办法，只好自力更生，处理方法如下：


carousel如下所示：


   
   
   



  
    
      
      
    
    
    
      
      
    


			
		

	





	

		

			

				
					
bootstrap 2-滚动广告Carousel

				
			

			

				

					sanluo11的博客
				

				

					01-25
					
					1100
					
				

			

		

		

			
				
Carousel是一个用于轮播内容的组件，也就是我们经常用的滚动广告，或者滚动图片。

一个Carousel的基本结构：

代码模板：


 
  
  
 
 
 
	
		
	
	
		
	
 
 
 
	
	Previous
 
 
	
	Next
 

实例如下

  
	 
	  	body{
	  		padding-top:50px
	  	}
	  	.carouse

			
		

	





	

		

			

				
					
Bootstrap插件carousel源码的学习

				
			

			

				

					learninginJAVA的专栏
				

				

					10-24
					
					2266
					
				

			

		

		

			
				
使用说明
轮播的HTML结构可以分为：容器、项目符号、轮播单元、左右的箭头


容器：需要data-ride="carousel"用于初始化；对应的id或class作为子元素的目标项目符号：需要在"carousel-indicators"的容器中；data-target或href指向容器；data-slide-to指向对应的轮播单元；需要有"active"类保证在一开始就激活单元：需要"i

			
		

	





	

		

			

				
					
Bootstrap Carousel 图片轮播效果实现详解

				
			

			

				

					
				

			

		

		

			
				
"Bootstrap Carousel是Bootstrap框架中的一个组件，用于创建动态图片轮播效果，常被称为轮转图或幻灯片。它提供了自动播放、鼠标悬停暂停、导航点以及左右切换图片的功能，使得网页中的多张图片可以有序且美观地展示...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值