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>
