bootstrap 幻灯片（轮播）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">文字描述1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">文字描述2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">文字描述3</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" role="button"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<script>
$('#myCarousel').carousel({
interval: 3000
});
</script>
</body>
</html>
js源码简易轮播：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html charset=utf-8" />
<title>images</title>
<script>
var curIndex = 0;
var timeInterval = 5000;
var arr = new Array();
arr[0] = "/wp-content/uploads/2014/07/slide1.png";
arr[1] = "/wp-content/uploads/2014/07/slide2.png";
arr[2] = "/wp-content/uploads/2014/07/slide3.png";
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById("obj");
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
<!-- <script language="javascript">
setInterval(test,1000);
var array = new Array();
var index = 0;
var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
function test() {
var myimg=document.getElementById("imgs");
if(index==array.length-1)
{ index=0; }else{ index++; }
myimg.src=array[index];
}
</script> -->
</head>
<body>
<img id = "obj" src = "/wp-content/uploads/2014/07/slide1.png" border = 0 />
</body>
</html>
js源码（全）:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8">
<title>images slide</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
border: 0;
}
a {
text-decoration: none;
}
#slide {
width: 800px;
height: 400px;
box-shadow: 0px 0px 5px #c1c1c1;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#slide ul {
position: absolute;
left: 0px;
top: 0px;
height: 400px;
width: 11930px;
}
#slide ul li {
width: 800px;
height: 400px;
overflow: hidden;
float: left;
}
#slide .ico {
width: 800px;
height: 20px;
overflow: hidden;
text-align: center;
position: absolute;
left: 0px;
bottom: 10px;
z-index: 1;
}
#slide .ico a {
display: inline-block;
width: 10px;
height:10px;
background: url(out.png) no-repeat 0px 0px;
margin: 0px 5px;
}
#slide .ico .active {
background: url(out1.png) no-repeat 0px 0px;
}
#btnLeft {
width: 60px;
height: 400px;
left: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnLeft :hover {
background: url() no-repeat 0px 0px;
}
#btnRight {
width: 60px;
height: 400px;
right: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnRight :hover {
background: url() no-repeat 0px 0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a");
var oSlide = document.getElementById("slide");
var oUl = oSlide.getElementsByTagName("ul");
var aLi = oUl[0].getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnLeft");
var oBtnRight = document.getElementById("btnRight");
var baseWidth = aLi[0].offsetWidth;
//alert(baseWidth);
oUl[0].style.width = baseWidth * aLi.length + "px";
var iNow = 0;
for(var i=0;i<aBtn.length;i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
//alert(this.index);
//alert(oUl[0].style.left);
move(this.index);
//aIco[this.index].className = "active";
}
}
oBtnLeft.onclick = function() {
iNow ++;
//document.title = iNow;
move(iNow);
}
oBtnRight.onclick = function() {
iNow --;
document.title = iNow;
move(iNow);
}
var curIndex = 0;
var timeInterval = 2000;
setInterval(change,timeInterval);
function change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex += 1;
}
}
function move(index) {
//document.title = index;
if(index>aLi.length-1) {
index = 0;
iNow = index;
}
if(index<0) {
index = aLi.length - 1;
iNow = index;
}
for(var n=0;n<aBtn.length;n++) {
aBtn[n].className = "";
}
aBtn[index].className = "active";
oUl[0].style.left = -index * baseWidth + "px";
//buffer(oUl[0],{
// left: -index * baseWidth
// },8)
}
}
</script>
</head>
<body>
<div id="slide">
<a id="btnLeft" href="javascript:void(0);" >321</a>
<a id="btnRight" href="javascript:void(0);" >123</a>
<!--when change next image:style="left: -(n-1)*800px;"-->
<ul>
<li><img src="file:///E|/③临时/3a301b09a098353bcecb18f8e9367fd7.jpg" alt="" width="100%"/></li>
<li><img src="file:///E|/③临时/ad3338eac84d86ed86a84038adfc9412.jpg" alt="" width="100%"/></li>
<li><img src="file:///E|/③临时/行政审批/背景/3f4157ecd100ae3dc364b8fe29d52162.jpg" alt="" width="100%"/></li>
</ul>
<div id="ico" class="ico">
<a class="active" href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
</div>
</div>
</body>
</html>
bootstrap 幻灯片（轮播）的更多相关文章
- 基于bootstrap的轮播广告页，带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- bootstrap 获得轮播中的索引 getActiveIndex
今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- flickity：支持触摸滑动，响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
- Bootstrap幻灯轮播如何支持触屏左右滑动手势？
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- Bootstrap实现轮播图
第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...
- BootStrap：轮播插件
前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQ ...
- bootstrap 图片轮播效果
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
随机推荐
- JMeter AI图片识别接口并发量测试
由于临时接到一个性能测试任务,测试8个独立接口在实验室环境的TPS.响应时间以及服务器性能监控如CPU.内存.IO等,没有明确具体的响应时间与并发数,需求较模糊. 1.软件.硬件环境信息:JMeter ...
- Django框架（九）—— 单表增删改查，在Python脚本中调用Django环境
目录 单表增删改查,在Python脚本中调用Django环境 一.数据库连接配置 二.orm创建表和字段 三.单表增删改查 1.增加数据 2.删除数据 3.修改数据 4.查询数据 四.在Python脚 ...
- CentOS7添加永久静态路由
CentOS7永久静态路由需要写到 /etc/sysconfig/network-scripts/route-****** 文件中,故在/etc/sysconfig/network-scripts/下 ...
- java 生成随机数字+字母组合 和字母组合
生成随机数包含数字,字母 /** * 生成随机数当作getItemID * n : 需要的长度 * @return */ private static String getItemID( int n ...
- Spring MVC源码分析（三）：SpringMVC的HandlerMapping和HandlerAdapter的体系结构设计与实现
概述在我的上一篇文章:Spring源码分析(三):DispatcherServlet的设计与实现中提到,DispatcherServlet在接收到客户端请求时,会遍历DispatcherServlet ...
- springfox-swagger原理解析与使用过程中遇到的坑
swagger简介 swagger确实是个好东西,可以跟据业务代码自动生成相关的api接口文档,尤其用于restful风格中的项目,开发人员几乎可以不用专门去维护rest api,这个框架可以自动为你 ...
- 【转】谈一谈 Normalize.css
原文链接: https://www.jianshu.com/p/9d7ff89757fd 笔记: 如何使用?
- 2019-4-15-VisualStudio-如何在-NuGet-包里面同时包含-DEBUG-和-RELEASE-的库
title author date CreateTime categories VisualStudio 如何在 NuGet 包里面同时包含 DEBUG 和 RELEASE 的库 lindexi 20 ...
- Perl 运算符
Perl 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号,如: 3+2=5. Perl 语言内置了丰富的运算符,我们来看下常用的几种: 算术运算符 比较运算符 逻辑运算符 赋值运算符 位 ...
- JavaScript做个时间表 Date()
<span id="shiji"></span><script> window.setInterval("time()",5 ...