boostrap 轮播 carousel(旋转木马)

来源：互联网发布：js timestamp 格式化编辑：程序博客网时间：2024/05/17 03:17

效果：

图片轮播

准备工作：用js生成图片这里用的是placeholder.js

网址为：https://github.com/hustcc/placeholder.js.git

在gist 获取 placeholder.js引入工程中

总结：

1、class="carousel slide" 表示轮播，有滑动的效果

2、data-ride="carousel" 触发轮播动作

3、class="carousel-inner" 表示轮播的内容

4、class="item active" 表示轮播一张张图片

5、<img option....> 表示placeholder.js生成图片，具体怎么弄可以自己去研究

设置轮播的箭头如下

代码

总结：

1、在carousel标签增加 id="slideshow"

2、data-slide="prev" 表示上一张幻灯片， class="left carousel-control" 表示用左边修饰的class

3、class="glyphicon glyphicon-chevron-left" 表示左箭头

增加幻灯片下面的圆点

代码：

总结：

1、圆点的类样式 class="carousel-indicators"

2、data-target="#slideshow" data-slide-to="0" 表示目标的ID 和指向幻灯片的索引（从0开始）

自定义实现控制播放

自己写js

carousel.js代码：

$(function(){$('.prev-slide').on('click',function(){$('#slideshow').carousel('prev');});$('.next-slide').on('click',function(){$('#slideshow').carousel('next');});$(document).on('keydown', function(e){console.log(e.which);switch(e.which){case 37:$('#slideshow').carousel('prev');break;case 39:$('#slideshow').carousel('next');break;}})});

html文件

总结：

1、class="text-center" 表示文本居中

2、class="btn-group" 表示按钮组

3、class="glyphicon glyphicon-forward" 表示对应图标，这是向右的图标

为中间播放设置动作

总结：

1、首先定义一个全局变量

2、绑定点击事件，.carousel('cycle')表示轮播 .carousel('pause') 表示暂停

3、js支持链式操作 removeClass('glyphicon-pause').addClass('glyphicon-play')

它一些选项

<div class="carousel slide" data-ride="carousel" id="slideshow" data-interval="1000" data-pause="false" data-wrap="true" >

data-intarval="1000" 表示播放的时间间隔，单位毫秒默认值为 5000

data-pause="false" 表示移上去暂停到当前幻灯片默认值为hover（表示暂停）

data-wrap="true" 表示循环播放，如果是false会停止到最后一张

arousel的事件

为幻灯片添加文字：

<div class="carousel-caption">
<h2>boostrap</h2>
<p>write less do more</p>
</div>

class="carousel-caption" 将文字添加到图片上。

最终效果：由于图片太大，存为bmp格式，失真了

最终html

<!DOCTYPE html><html lang="zh-hans"><head><meta charset="UTF-8" /><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><link rel="stylesheet"href="/spittr/bootstrap-3.3.7-dist/css/bootstrap.min.css"></link><link rel="stylesheet" href="/spittr/css/style.css"></link><title>Insert title here</title></head><body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse"data-target="#responsive-navbar"><span class="icon-bar"></span> <span class="icon-bar"></span> <spanclass="icon-bar"></span></button><a href="#" class="navbar-brand"><strong>BootStrap</strong>.com</a></div><div class="collapse navbar-collapse" id="responsive-navbar"><ul class="nav navbar-nav"><li class="active"><a href="">组件</a></li><li><a href="">CSS</a></li><li><a href="">JavaScript</a></li></ul><form action="" class="navbar-form navbar-left"><input type="text" placeholder="搜索" class="form-control" /><button type="submit"><span class="glyphicon glyphicon-search"></span></button></form><a href=""class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">联系我们</a><div class="profile navbar-right"><ul class="nav navbar-nav"><li><a href="" data-toggle="modal" data-target="#login">登录</a></li><li><a href="">注册</a></li></ul><p class="navbar-text">欢迎您-<a href="#" class="navbar-link">小猫咪</a></p></div></div></div></nav><div class="carousel slide" data-ride="carousel" id="slideshow" data-interval="1000" data-pause="hover" data-wrap="true" ><ol class="carousel-indicators"><li data-target="#slideshow" data-slide-to="0" class="active"></li><li data-target="#slideshow" data-slide-to="1"></li></ol><div class="carousel-inner"><div class="item active"><img src="/spittr/images/2.jpg" alt=""><div class="carousel-caption"><h2>boostrap</h2><p>write less do more</p></div></div><div class="item"><img src="/spittr/images/4.jpg" alt=""><div class="carousel-caption"><h2>JavaScript</h2><p>I will like her pretty</p></div></div></div><a href="#slideshow" data-slide="prev" class="left carousel-control"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#slideshow" data-slide="next" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right"></span></a></div><div class="text-center" style="padding:20px;"><div class="btn-group"><button class="btn btn-default prev-slide"><span class="glyphicon glyphicon-backward"></span></button><button class="btn btn-default play-and-stop"><span class="glyphicon glyphicon-play"></span></button><button class="btn btn-default next-slide "><span class="glyphicon glyphicon-forward"></span></button></div></div><div class="modal in fade" id="login" tabindex="-1"data-remote="login.html"><div class="modal-dialog"><div class="modal-content"></div></div></div><script type="text/javascript" src="/spittr/jquery/jquery.js"></script><script type="text/javascript"src="/spittr/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script type="text/javascript"src="/spittr/lib/placeholder.min.js"></script><script type="text/javascript"src="/spittr/js/carousel.js"></script><script type="text/javascript">$(function(){$('#slideshow').on('slide.bs.carousel', function(){console.log('播放幻灯片');});$('#slideshow').on('slid.bs.carousel', function(){console.log('播放完成了');});})</script></body></html>

<!DOCTYPE html><html lang="zh-hans"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet"href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"><link rel="stylesheet" href="../css/style.css"><title>Insert title here</title></head><body><div class="modal-header"><button class="close" data-dismiss="modal">×</button><h4>用户登录</h4></div><div class="modal-body"><div class="form-group"><label for="username">用户名</label><input type="text" class="form-control" id="username" placeholder="请输入用户名"></div><div class="form-group"><label for="password">密码</label><input type="password" class="form-control" id="password" placeholder="请输入密码"></div></div><div class="modal-footer"><button class="btn btn-primary">登录</button></div></body></html>

style.css:

body{padding-top:70px;}/* 对输入框进行设置背景色、去边框，字体颜色 */.navbar-inverse input[type="text"] {  background: #313131;border:none;color:#999;}img  {width:100%;}/*设置 表单以 导航栏作为参照物*/.navbar-inverse .navbar-form {position: relative;}/*设置 按钮位置在 表单内的绝对位置*/.navbar-inverse button[type="submit"] {position: absolute;top:30%;right:20px;background: none;border: none;}@media(min-width: 768px){.navbar-inverse button[type="submit"]{top:15%;}}/*设置图标的颜色*/.navbar-inverse .glyphicon {color : #999;}.profile {margin-right:25px;}

carousel.js

$(function(){$('.prev-slide').on('click',function(){$('#slideshow').carousel('prev');});$('.next-slide').on('click',function(){$('#slideshow').carousel('next');});$(document).on('keydown', function(e){console.log(e.which);switch(e.which){case 37:$('#slideshow').carousel('prev');break;case 39:$('#slideshow').carousel('next');break;}});var play = false;$('.play-and-stop').click(function(){if(!play) {$('#slideshow').carousel('cycle');$(this).children('span').removeClass('glyphicon-play').addClass('glyphicon-pause');} else {$('#slideshow').carousel('pause');$(this).children('span').removeClass('glyphicon-pause').addClass('glyphicon-play');}play = !play;});});

阅读全文

0 0