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">
   
   <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>
   
   <div class="carousel-inner">
       <div class="item active">
           <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

<div class="carousel-caption">文字描述3</div>
       </div>
   </div>
   
   <a class="carousel-control left" href="#myCarousel" role="button"
       data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel"
       data-slide="next">&rsaquo;</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>


</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 {
   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;
   11930px;
}
#slide ul li {
   800px;
   height: 400px;
   overflow: hidden;
   float: left;
}
#slide .ico {
   800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
}
#slide .ico a {
   display: inline-block;
   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 {
   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 {
   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>

<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>