jquery轮播（自动+下标+左右）

自从 上午把上传之后、就觉得纠结的很 所以呢  我就重新写了 JS 运用了2种方式 来混合写的 { each(index) 和方法调用 }

可以看我 上一篇写的 HTML 和CSS   。

JS 更加易懂

<script type="text/javascript">
　　$(function(){
　　　　var aSlides = $("#slideBox .slide");
　　　　/* 获取每一个img */
　　　　var aBtns = $("#slideBox .btns li");
　　　　/*获取 每个li*/
　　　　var num = 0; /* 下标 */
　　　　var timers = setInterval(time,2000);
　　　　function time(){
　　　　　　num++;
　　　　　　if (num >= aBtns.length) {
　　　　　　　　num = 0;
　　　　　　}
　　　　　　ulAnimation();
　　　　}
　　　　/*动画效果*/
　　　　function ulAnimation(){
　　　　　　for (var i = 0, j = 0; i < aBtns.length, j < aSlides.length; i++, j++) {
　　　　　　　　aBtns[i].className = "";
　　　　　　　　aSlides[j].style.zIndex = 0;
　　　　　　}
　　　　　　aBtns[num].className = "current";
　　　　　　aSlides[num].style.zIndex = 1;
　　　　}
　　　　//鼠标移入移出 id 为 main 的 div 显示或隐藏 button ，同时清除 或 重新调用 timers
　　　　$('#slideBox').mouseover(function(){
　　　　　　$('#slideBox .btn').show();
　　　　　　clearInterval(timers);
　　　　}).mouseout(function(){
　　　　　　$('#slideBox .btn').hide();
　　　　　　timers = setInterval(time,2000);
　　　　});
　　　　//鼠标移入 ul li 时 ul 在 #slideBox 里面所有 在鼠标离开时 已经执行了上面的 鼠标离开 方法
　　　　aBtns.each(function(index){
　　　　　　aBtns[index].onmouseover = function () {
　　　　　　/* 循环 全部 zIndex 为 0 没有css */
　　　　　　　　for (var j = 0; j < aSlides.length; j++) {
　　　　　　　　　　aSlides[j].style.zIndex = 0;
　　　　　　　　　　aBtns[j].className = "";
　　　　　　　　}
　　　　　　　　/* 给鼠标移入时 添加 zIndex和css */
　　　　　　　　aBtns[index].className = "current";
　　　　　　　　aSlides[index].style.zIndex = 1;
　　　　　　　　num = index;
　　　　　　}
　　　　});
　　　　/* 上一张 */
　　　　$("#slideBox .left").on("click",function(){
　　　　　　num --;
　　　　　　if (num < 0) {
　　　　　　　　num =  aBtns.length -1;
　　　　　　}
　　　　　　clearInterval(timers);
　　　　　　ulAnimation();
　　　　});
　　　　/*下一张*/
　　　　$("#slideBox .right").on("click",function(){
　　　　　　num ++;
　　　　　　if (num >= aBtns.length) {
　　　　　　　　num = 0;
　　　　　　}
　　　　　　clearInterval(timers);
　　　　　　ulAnimation();

　　　　});
　　});
</script>

还有一句css  .slideBox .btn {display: none} 随你们加不加。

优点就是 图片可以无限大  不在受大小限制

还有不足之处就是 （没有动画效果）