bootstrap轮播 切换过渡

2015-12-01 14:25:00 adiking520110 阅读数 83

事件

下表列出了轮播(Carousel)插件中要用到的事件。这些事件可在函数中当钩子使用。

事件描述实例
slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。
$('#identifier').on('slide.bs.carousel', function () {
  // 执行一些动作...
})
slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。
$('#identifier').on('slid.bs.carousel', function () {
  // 执行一些动作...
})

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例-轮播(carousel)插件的事件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div id="myCarousel"class="carousel slide">
<!--轮播(carousel)指标-->
<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>
</ol>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png" alt="First slide"/>
</div>
<div class="item">
<img src="Images/slide2.png" alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" alt="Three slide" />
</div>
</div>
<a href="#myCarousel"class="carousel-control left"data-slide="prev">&lsaquo;</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">&rsaquo;</a>
</div>
</div>
<script>
$(document).ready(function () {
$("#myCarousel").on("slide.bs.carousel", function () {
alert("Hello ,您调用了slide方法触发了该事件。")
})
})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/melao2006/p/5009974.html

2019-01-06 21:20:42 LoveyourselfJiuhao 阅读数 455

轮播(Carousel)插件 

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

如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,您可以引用 Bootstrap 插件, bootstrap.js 或压缩版的 bootstrap.min.js。

用法 

1.通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。

<1> 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。

<2> 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移 动到一个特定的索引,索引从 0 开始计数。

<3> data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

2.通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示: 

$('.carousel').carousel() 

可选的标题 

您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可,它会自动对齐并格式化。

<div class="item">
     <img src="../img/slide1.png" alt="First Slide">
     //添加标题
     <div class="carousel-caption">标题1</div>
</div>

选项 

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

方法 

下面是一些轮播(Carousel)插件中有用的方法: 

注:如果觉得幻灯片切换的有些慢,可以在页面初始化时加入以下代码来设置轮播间 隔时间: 
   $("#myCarousel").carousel({'interval':1000}); 

事件

下表列出了轮播( Carousel)插件中要用到的事件。这些事件可在函数中当钩子使用。
 slide.bs.carousel:当调用 slide 实例方法时立即触 发该事件。

$('#identifier').on('slide.bs.carousel', function () { 
  // 执行一些动作... 
})

slid.bs.carouse:当轮播完成幻灯片过渡效果时触 发该事件。 

$('#identifier').on('slid.bs.carousel', function () { 
  // 执行一些动作... 
})

代码实例

<!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, initial-scale=1">
    <title>轮播(Carousel)插件</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="padding:20px">
        <!-- 
        .carousel slide:声明轮播插件
        data-target="":标记定位插件
        data-slide="" :接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置
        data-slide-to="":向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移 动到一个特定的索引,索引从 0 开始计数
        .active:第一次激活的轮播页面
        -->
        <div id="myCarousel" class="carousel slide">
            <!--轮播指标 -->
            <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>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <!--轮播内容 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="../img/dong0.jpg" alt="First Slide" class="img-rounded img-responsive">
                   <div class="carousel-caption">标题 1</div>
                </div>
                <div class="item">
                    <img src="../img/dong1.jpg" alt="Second Slide" class="img-rounded img-responsive">
                    <div class="carousel-caption">标题 2</div>
                </div>
                <div class="item">
                    <img src="../img/dong2.jpg" alt="Third Slide" class="img-rounded img-responsive">
                    <div class="carousel-caption">标题 3</div>
                </div>
                <div class="item">
                    <img src="../img/dong3.jpg" alt="Third Slide" class="img-rounded img-responsive">
                    <div class="carousel-caption">标题 3</div>
                </div>
                <div class="item">
                    <img src="../img/dong4.jpg" alt="Third Slide" class="img-rounded img-responsive">
                    <div class="carousel-caption">标题 3</div>
                </div>
            </div>
            <!--轮播导航 -->
            <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
            <a href="#myCarousel" class="carousel-control right" data-slide="next">&rsaquo;</a>
        </div>

        <!-- 控制按钮 -->
        <div style="text-align:center;padding:20px;">
            <input type="button" class="btn start-slide" value="启动">
            <input type="button" class="btn pause-slide" value="暂停">
            <input type="button" class="btn prev-slide" value="上一个">
            <input type="button" class="btn next-slide" value="下一个">
            <input type="button" class="btn slide-zero" value="小猫(零)">
            <input type="button" class="btn slide-one" value="小虎(一)">
            <input type="button" class="btn slide-two" value="小豹(二)">
            <input type="button" class="btn slide-three" value="小鼠(三)">
            <input type="button" class="btn slide-four" value="小狗(四)">
        </div>
    </div>
</body>
<script>
    $(function () {
        //两秒钟轮播一次
        $('#myCarousel').carousel({
            interval: 2000
        }).on("slide.bs.carousel",function(){
            //轮播前触发
            console.log("slide.bs.carousel")
        }).on("slid.bs.carousel",function(){
            //轮播后触发
            console.log("slid.bs.carousel")
        })
        //启动轮播JS
        $(".start-slide").click(function(){
            $('#myCarousel').carousel('cycle');
        })
        //暂停轮播JS
        $(".pause-slide").click(function(){
            $('#myCarousel').carousel('pause');
        })
        //前一个轮播JS
        $(".prev-slide").click(function(){
            $('#myCarousel').carousel('prev');
        })
        //后一个轮播JS
        $(".next-slide").click(function(){
            $('#myCarousel').carousel('next');
        })
        //定位第一个图片小猫JS
        $(".slide-one").click(function(){
            $('#myCarousel').carousel(0);
        })
        //定位第二个图片小虎JS
        $(".slide-one").click(function(){
            $('#myCarousel').carousel(0);
        })
        //定位第三个图片小豹JS
        $(".slide-two").click(function(){
            $('#myCarousel').carousel(1);
        })
        //定位第四个图片小鼠JS
        $(".slide-three").click(function(){
            $('#myCarousel').carousel(2);
        })
        //定位第五个图片小狗JS
        $(".slide-four").click(function(){
            $('#myCarousel').carousel(2);
        })
    })
</script>
</html>

显示效果:

2019-01-04 14:30:50 weixin_39209728 阅读数 600
<div id="myCarousel" class="carousel slide" data-ride="carousel">
	<!-- 轮播(Carousel)指标 -->
	<ol class="carousel-indicators">
	<c:forEach var="item"  items="${model}" varStatus="go">
	<c:if test="${go.count==1}">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	</c:if>
	<c:if test="${go.count!=1}">
		<li data-target="#myCarousel" data-slide-to="${go.count}"></li>
	</c:if>
		
	</c:forEach>
	</ol>   
	<!-- 轮播(Carousel)项目 -->
	<div class="carousel-inner"  role="listbox">
		<c:forEach var="i" items="${model}" varStatus="go">
		<c:if test="${go.count==1}">
			<div class="item active">
			<img src="${i.imgurl}" alt="${i.description}" >
			<div class="carousel-caption">
			<h3 data-animation="animated bounceInLeft">
			This is the caption for slide 1
			</h3>
			<h3 data-animation="animated bounceInRight">
			This is the caption for slide 1
			</h3>
			<button class="btn btn-primary btn-lg"
			data-animation="animated zoomInUp">Button</button>
			</div>
			</div>
		</c:if>
		<c:if test="${go.count!=1}">
			<div class="item">
			<img src="${i.imgurl}" alt="${i.description}" >
			<!-- 添加动画效果animated ,动画循环infinite -->
			<div class="carousel-caption animated rotateIn">
			
			<h3 class="icon-container" data-animation="animated bounceInDown">
			<span class="glyphicon glyphicon-heart"></span>
			</h3>
			<h3 data-animation="animated bounceInUp">
			This is the caption for slide 2
			</h3>
			<button class="btn btn-primary btn-lg"
			data-animation="animated zoomInRight">Button</button>
			</div>
		</div>
		</c:if>
			
		</c:forEach>
		
	</div>
	<!-- 轮播(Carousel)导航 -->
	<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
	
	</div>
<script type="text/javascript">
var $myCarousel = $('#myCarousel');
$myCarousel.carousel();
function doAnimations(elems) {
	var animEndEv = 'webkitAnimationEnd animationend';
	elems.each(function () {
		var $this = $(this),
		$animationType = $this.data('animation');
		$this.addClass($animationType).one(animEndEv, function () {
			$this.removeClass($animationType);
		})
	})
}

var $firstAnimatingElems = $myCarousel.find('.item:first')
.find('[data-animation ^= "animated"]');
doAnimations($firstAnimatingElems);
$myCarousel.carousel('pause');

$myCarousel.on('slide.bs.carousel', function (e) {
	var $animatingElems = $(e.relatedTarget)
	.find("[data-animation ^= 'animated']");
	doAnimations($animatingElems);
})
</script>

 

2016-03-17 17:31:54 u010874036 阅读数 10029

Bootstrap默认给各组件提供了基本的动画过渡效果,值得注意的是,Bootstrap使用的动画过渡效果全部使用了CSS3的语法,所以IE6、IE7、IE8是不能用动画过渡效果了。

默认情况下,以下组件使用了动画过渡效果:
1、模态弹窗(Modal)的滑动和渐变效果;
2、选项卡(Tab)的渐变效果;
3、警告框(Alert)的渐变效果;
4、旋转轮播(Carousel)的滑动效果。


动画过渡效果不是标准的插件,而是一个判断动画的工具方法,所以没有遵守JavaScript插件的标准开发步骤。

2017-05-01 22:30:08 qq_27905183 阅读数 2558

声明式触发需要使用到的几个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开始
5.data-interval:轮番图自动轮播的等待时间,如果为false则不自动轮播,默认为5000ms
6.data-pause:指定鼠标停留在轮换图上是否停止轮播,离开后继续自动轮播
7.data-wrap:指定是否持续轮播

轮播图代码实现:

<!Doctype html>
<html>
    <head>
        <title>登录界面-bootstrap打造前端--美观高大上-成兮制作</title>

        <!-- meta -->
        <meta http-equiv="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- ICON Link -->
        <link rel="shorticon" type="image/x-icon" href="Images/webicon.ico" />
        <link rel="icon" type='image/x-icon' href="Images/webicon.ico" />

        <!--Bootstrap CSS Link-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" />

        <!-- Bootstrap JS and JQuery JS Link -->
        <script src="JS/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

    </head>
    <body>
        <!-- 制作巨幕轮播图 -->
        <div class="carousel" id="carouselcontainer" data-ride="carousel" style="background-color: rgba(128, 128, 128, 0.42);margin-top: 10%;width: 100%;height:658px;">
            <ol class="carousel-indicators">
                <li class="active" data-target="#carouselcontainer" data-slide-to="0"></li>
                <li data-target="#carouselcontainer" data-slide-to='1'></li>
                <li data-target="#carouselcontainer" data-slide-to="2"></li>
                <li data-target="#carouselcontainer" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <a href="javascript:void(0);">
                        <img src="Images/1.png" title="巨幕轮播图1" style="width: 100%;height: 658px;" />
                    </a>
                </div>
                <div class="item">
                    <a href="javascript:void(0);">
                        <img src="Images/1.jpg" title="巨幕轮播图2" style="width: 100%;height: 658px;"  />
                    </a>
                </div>
                <div class="item">
                    <a href="javascript:void(0);">
                        <img src="Images/2.jpg" title="巨幕轮播图3" style="width: 100%;height: 600px;" />
                    </a>
                </div>
                <div class="item">
                    <a href="javascript:void(0);">
                        <img src="Images/3.jpg" title="巨幕轮播图4" style="width: 100%;height: 600px;" />
                    </a>
                </div>
            </div>
            <div class="left carousel-control" href="#carouselcontainer" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </div>
            <div class="right carousel-control" href="#carouselcontainer" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </div>
        </div>
    </body>
</html>

Bootstrap 轮播

阅读数 27

Bootstrap 轮播图

阅读数 1262