一、轮播图的概念
轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。
二、轮播图的设计思想
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。下面介绍HTML代码：
<
>
根据上面的HTML代码：
1.div banner就是上文中提到的轮播的窗口，它就是呈现图片的部分。
2.无序列表 img：用来存放要进行呈现的图片，而图片的水平放置与零间隙拼接会在后面的Css和Jquery代码中进行实现。
3.无序列表 num：用来存放图片下方对应的圆点。可以看到在HTML代码中并没有进行圆点的添加，这是因为通过Jquery代码首先获取图片的张数可以动态对应的添加圆点的个数，也可以动态的利用Css属性为圆点添加相应属性。
4.div btn ：轮播图的左右按钮的呈现通过标签以及后面的Css代码进行实现。
下面给出Css代码进行分析：
/*整体去除内外边距*/
* {
margin: 0;
padding:0;
}
/*取消列表的图标内容*/
ul{
list-style: none;
}
/*对整体部分的控制，浏览图片的窗口*/
.banner{
width: 1024px;
height: 512px;
border: 2px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
/*图片的初步设置后面的动态内容会在js中实现*/
.img{
width:1024px;
height: 512px;
position: absolute;
top: 0;
left: 0;
}
/*让没长图片向左浮动*/
.img li{
float: left;
}
/*圆点承载部分的设计*/
.num{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 0;
}
/*圆点设计*/
.num li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
/*按钮部分初始不可见*/
.btn{
display: none;
}
/*按钮形状设计*/
.btn span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
/*上一个设计*/
.btn .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
/*下一个设计*/
.btn .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
/*对按妞动态呈现的变换进行类选择器的设计为js代码部分进行铺垫*/
.num .active{
background-color: #fff;
}
.hide{
display: none;
}通过代码中的注释可以了解各部分代码对应的HTML标签以及相应的功能这里不做详细的介绍。只要对不会的属性进行了解就可以了解实现的效果。
下面对JavaScript代码进行分析：
//界面加载完毕执行以下程序
$(function(){
//定义i变量为动态控制图片轮播做准备，i的值与每张图片进行一一的对应
var i=0;
//时间变量，为自动轮播以及对光标的影响做出相应的反应
var timer=null;
//根据图片的张数动态添加圆点个数
for (var j = 0; j < $('.img li').length; j++) {
$('.num').append('');
}
//默认情况下的第一个圆点进行背景设计
$('.num li').first().addClass('active');
//根据光标的影响控制按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
});
//将第一张图片复制并添加到img部分下与前五张图片相接
var firstimg=$('.img li').first().clone(); //复制第一张图片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
//定时器自动轮播
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});//保证无缝轮播，设置left值
}
//进行下一张图片
$('.img').stop().animate({left:-i*1024},500);
//圆点跟着变化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000);
//鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
//进行下一张图片
$('.img').stop().animate({left:-i*1024},500);
//圆点跟着变化
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
});
//上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*1024});
}
$('.img').stop().animate({left:-i*1024},500);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
});
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1; //这里不是i=0
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*1024},500);
if (i==$('.img li').length-1) { //设置小圆点指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
};
});
//鼠标划入圆点
$('.num li').mouseover(function(){
var _index=$(this).index();
//维持i变量控制的对应关系不变
i = _index;
$('.img').stop().animate({left:-_index*1024},300);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
});
})这部分代码的难点在于是否了解JQuery中的相应方法，许多语句实现的功能我都在代码的注释中进行了介绍，而一些方法，不知道的可以去查询JQuery的API进行了解，再通过对不了解部分代码的删除，运行。在比对中真切的了解其实现的功能。
特此声明：此代码是上大学期间学习前端时所写，代码质量很浅陋，不建议用到实际项目中。只是记录下自己当时所理解的轮播图的实现原理。
使用建议：现在有很多开源且成熟的轮播插件，根据开发文档直接使用效果会更好！
特别注意：如果是直接复制粘贴代码看效果，注意一下文件的引入，其中有jquery依赖文件要引入（jquery自行下载），css与js文件名也要与html中的引入名字相同。我复制粘贴引入jquery试过可以运行起来
