当不能用bootstrap外部框架时，自己写一个轮播图。
首先定义一个装所有组件的盒子，div class为content。里面包含了图片区域，底下的小圆圈区域和左右箭头区域。
该案例可以实现点击底下对应的小圆圈换图，点击左右箭头换图，以及自动轮播。
<!DOCTYPE html>
<html>
<head> <title>轮播图</title> <style type="text/css"> *{ //清除默认样式 margin: 0; padding: 0; } #content{ width: 1000px; height: 409px; margin: 0 auto; position: relative; overflow: hidden; } .bg li{ list-style: none; float: left; display: none; } .bg li.current{ display: block; } .indicator{ position: absolute; bottom: 20px; left: 400px; } .indicator li{ width: 12px; height: 12px; list-style: none; float: left; border-radius: 6px; cursor: pointer; background: #ccc; margin-left:6px; } .indicator .current{ background-color: #00a3d2; } .right,.left{ position: absolute; top: 180px; cursor: pointer; } .left{ left: 30px; } .right{ right: 30px; } </style> <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> var index = 0; $(function(){ //找到所有的图片 var pics = $(".bg li"); var lis = $(".indicator li"); //提取一个公共的换图方法 function changpic(){ //控制li的class换图 pics.eq(index).addClass("current").siblings().removeClass("current"); lis.eq(index).addClass("current").siblings().removeClass("current"); } //点击小圆点换图 lis.click(function(){ //去改变index的值 index = $(this).index();//this代表当前每一个li元素 console.log(index); //调用换图的函数 changpic(); }); //点击左右箭头换图 $(".left").click(function(){index--;
//当下标值小于0时，即等于-1，那么就从最后一个开始
if(index == -1){ index = 4; } changpic();});
$(".right").click(function(){
index++;
//当下标值大于4，则让index从0开始
if(index == 5){ index = 0; } changpic(); });//当需要自动轮播时需要用setInterval( )函数。仿照前面右箭头的轮播方式，先轮播，最后index++，使间隔时间为5秒。最后不要忘了调用函数
function play(){ setInterval(function(){ if(index == 5){ index = 0; } changpic(); index++; },5000); } play(); }); </script> </head> <body> <div id = "content"> <ul class = "bg"> <li class = "current"><a href = "#"><img src = "bg_1.jpg" /></li> <li><a href = "#"><img src = "bg_2.jpg" /></li> <li><a href = "#"><img src = "bg_3.jpg" /></li> <li><a href = "#"><img src = "bg_4.jpg" /></li> <li><a href = "#"><img src = "bg_5.jpg" /></li> </ul> <ul class = "indicator"> <li id = "bg_1" class = "current"></li> <li id = "bg_2"></li> <li id = "bg_3"></li> <li id = "bg_4"></li> <li id = "bg_5"></li> </ul> <img class = "left" src = "l.png"> <img class = "right" src = "r.png"> </div> </body> </html>