轮播图在很多网站都会出现，有横向轮播图、纵向轮播图、淡入淡出轮播图、3D轮播图……等等

本站使用的是JQ制作的轮播图。 接下来我们用一个简单的JQ程序实现简单的轮播切换

准备工具：

1.JQ类库一份

2.html编辑器

3.浏览器(推荐最新火狐或谷歌)

远离IE—珍爱生命

如果有JQ类库的小伙伴就不用管下面这一步，如果没有JQ的可以用下面这个代码使用百度的JQ

//使用百度jq类库
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

过程很快的，不会太麻烦，CSS和HTML我会直接发出来并写上一些重要的注释，该文章主要是用JQ

<div class="container">

<div class="pic">//4张轮播图片 start 

<div class="content" style="display:block;">//单独的一个图片div设置默认显示
            <a href="#">
                <img src="img/1.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/2.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/3.jpg" alt=""/>
            </a>
        </div>
        <div class="content">
            <a href="#">
                <img src="img/4.jpg" alt=""/>
            </a>
        </div>
    </div>//4张轮播图片 end
    <div class="btn">
        <ul>
            <li class="but"></li>//单独的一个类设置默认样式
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

css:

*{
margin:0;//初始化就不说了
padding:0;
}
.container{
width:400px;//设置整个包裹图片和按钮的盒子宽度高度以及居中显示
height:200px;
margin:20px auto 0;
}
.content{//所有的图片都初始化为不显示，并设置绝对定位 PS：第一张图在html中设置display:block;默认显示
display:none;
position:absolute;
}
.content a img{//设置图片默认宽度高度
width:400px;
height:200px;
}
/*轮播按钮*/
.btn{
position:relative;//使用相对定位设置 右浮动 距离顶部定位180px
float:right;
top:180px;
z-index: 9999;//设置按钮在最顶层 以免按钮被淹没在图片最下面
}
.btn ul li{
width:10px;
height:10px;
border-radius:50%;//圆形按钮
list-style-type:none;//初始化li圆点
display:inline-block;//横向排列 其实左浮动也可以
background: #9e9d9c;
cursor:pointer;
}
/*轮播时按钮样式*/
.btn ul li.but{//JQ使用的时候点击按钮改变颜色
background: #53baff;
}

最重要的JQ脚本 其实轮播的jq很简单，只有几行代码即可实现轮播效果 

<script type="text/javascript">
var i = 0;//设置i并初始化为0(因为程序都是0开始的)
$(".btn ul li").click(function () { //当轮播下面的按钮被点击的时候
    i = $(this).index();//将点击的元素下标(位置，第一个为0，第二个为1……)赋值给i以便后面使用
    //然后将当前图片用eq索引当前按钮位置，并淡出(消失)遍历进入第二张图片
    $(".container .content").eq(i).fadeIn().siblings().fadeOut();
    //使用this关键字后就可以不用eq索引了因为本身就是点击的按钮
    //将当前点击的按钮类换成预先在css里面设置好的 "but"类，同样的遍历之后清除此类
    $(this).addClass("but").siblings().removeClass("but");
    //之后。。一个简单的点击轮播图实现了
});
//轮播图毕竟是要自动轮播的接下来就用js的定时函数setInterval()来定时更换轮播的图片与按钮的类
function start() {//自定义函数 start()用来定时更换
    i++;//将全局变量i自增1
    if (i > 3)//判断如果大于3（因为只有4张图片 0 1 2 3） 
        i = 0;//就把i初始化为0(转到第一张图片)
    $(".container .content").eq(i).fadeIn().siblings().fadeOut();//之后的和点击一样了，可以看看上面的
    //此处需要注意，因为是自动轮播的，所以需要用eq来索引当前图片的位置，来修改按钮类
    $(".btn ul li").eq(i).addClass("but").siblings().removeClass("but");
}
setInterval("start()", 3000);
</script>

然后就……没有然后了……一个简单的自动、点击轮播图就做完了，本站的轮播图添加了左右切换……这个原理也是很简单的，判断当前i位置在根据图片数量进行切换