图片轮播相信很多人都会直接去下载一个插件，改改就行了。但是，今天要给大家讲一下具体的原理。
具体的图如下面：
实现图片轮播，最重要的是控制好JQuery的代码，主要有以下几个要点需要注意：
1. 图片在没有鼠标事件的情况下，要实现图片轮播，就需要setInterval（）定时函数进行轮播
2. 在图片轮播的时候，最下面的文字要变化，角标也需要变化
3. 点击左右箭头切换上一张或者下一张图片，要注意让自动轮播停止，给左右箭头绑定上一张或者下一张的事件
4.鼠标移动到任意一个角标，相应的图片要变，文字也要变
要了解的技术：
1.setInterval()函数的用法
2.JQuery的find()函数
3.JQuery的romveClass()函数
4.JQuery的addClass()函数
5.JQuery的eq()函数
6.JQuery的each()函数
代码展示：
html代码：
<body> <div id="wrapper"> <div id="banner">
<!-- 轮播图片 -->
<ul class="imgList"> <li><img src="img/img1.jpg" width="400px" height="300px" alt="puss image1" /></li> <li><img src="img/img2.jpg" width="400px" height="300px" alt="puss image2" /></li> <li><img src="img/img3.jpg" width="400px" height="300px" alt="puss image3" /></li> <li><img src="img/img4.jpg" width="400px" height="300px" alt="puss image4" /></li> <li><img src="img/img5.jpeg" width="400px" height="300px" alt="puss image5" /></li> </ul> <!-- 左右箭头的图片 --> <img src="img/left.png" width="25px" height="60px" id="prev" /> <img src="img/right.png" width="25px" height="60px" id="next" /> <div id="bg"></div> <!-- 轮播文字 --> <ul class="infoList"> <li class="infoOn">puss image1</li> <li>puss image2</li> <li>puss image3</li> <li>puss image4</li> <li>puss image5</li> </ul> <!-- 轮播角标 --> <ul class="indexList"> <li class="indexOn">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body>
CSS样式：
body,div,ul,li,img{margin: 0;padding: 0;} ul,li{list-style: none;} #wrapper{position: relative;margin: 30px auto;width: 400px;height: 300px;border: 0px solid red;} #banner{position: relative;width: 400px;height: 300px;border: 0px solid green;overflow: hidden;} .imgList{position: relative;width: 2000px;height: 300px;z-index: 10;overflow: hidden;} .imgList li{float: left;display: inline;} #prev,#next{position: absolute;top: 120px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);} #prev{left: 10px;} #next{right: 10px;} #prev:hover,#next:hover{opacity: 0.6;filter:alpha(opacity=60);} #bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index: 20;background: black;opacity: 0.4;filter: alpha(opacity=40);} .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;} .infoList li{display: none;} .infoList .infoOn{display: inline;color: white;} .indexList{position: absolute;right: 10px;bottom: 10px;background: b;z-index: 30;} .indexList li{display: inline;cursor: pointer;background: gray;margin-left: 5px;padding: 2px 4px;} .indexList .indexOn{background: wheat;font-weight: bold;}
js代码：
<script type="application/javascript" src="js/jquery-1.9.1.js"></script>
<script type="application/javascript">
$(function() {
var count = 0;
var imgLength = $(".imgList li").length;
//alert("length:"+imgLength);
/**
* 1.让图片通过setInterval（）定时函数，实现图片自动滑动
* 2.点击左右按钮时，清除自动轮播，绑定左右切换事件
* 3.自动轮播事件，要注意图片动，相应的文字描述、角标也要跟随变化
*/
var autoChange = setInterval(function() {
if(count < imgLength - 1) {
count++;
} else {
count = 0;
}
//调用变化函数
toChange(count);
}, 2500);
/**
* 左箭头事件，鼠标划入，停止轮播；滑出，开始轮播
* 点击左箭头，表示上一页，这时要确定上一张图片的count数为多少
* @param {Object} count
*/
$("#prev").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
$("#prev").click(function(){
count = (count >0)? (--count) : (imgLength-1);
toChange(count);
});
/**
* 右箭头事件，鼠标划入，停止轮播；滑出，开始轮播
* 点击右箭头，表示下一页，这时要确定下一张图片的count数为多少
* @param {Object} count
*/
$("#next").hover(function(){
clearInterval(autoChange);
},function(){
autoChangeAgain();
});
$("#next").click(function(){
count = (count < imgLength-1)? (++count) : 0;
toChange(count);
});
/**
* 给下面的角标绑定滑入事件
*/
$(".indexList").find("li").each(function(item){
$(this).hover(function(){
clearInterval(autoChange);
toChange(item);
count = item;
},function(){
autoChangeAgain();
});
});
//这个函数要放在里面才可以，因为autoChange、count、ImLength参数都是提前声明好的，需要传承上一个调用函数的数据
function autoChangeAgain(){
autoChange = setInterval(function() {
if(count < imgLength - 1) {
count++;
} else {
count = 0;
}
//调用变化函数
toChange(count);
}, 2500);
}
});
function toChange(count) {
/**
* 逻辑处理：
* 1.图片切换
* 2.文字切换
* 3.角标切换
*/
var moveLen = count * 400;
$(".imgList").animate({
left: "-" + moveLen + "px"
}, 500);
$(".infoList").find("li").removeClass("infoOn").eq(count).addClass("infoOn");
$(".indexList").find("li").removeClass("indexOn").eq(count).addClass("indexOn");
}
</script>
以上是具体的实现过程
