jquery三张图片轮播代码 jquery图片轮播简单代码

首先要导入插件

<script src="js/jquery.min.js" type="text/javascript"></script>

HTML代码：

<div class="OutDiv">
    <!--图片-->
    <ul class="imgList">
        <li class="imgOn"><a href="#"><img src="images/01.jpg"></a></li>
        <li><a href="#"><img src="images/02.jpg"></a></li>
        <li><a href="#"><img src="images/03.jpg"></a></li>
        <li><a href="#"><img src="images/04.jpg"></a></li>
        <li><a href="#"><img src="images/05.jpg"></a></li>
    </ul>
    <!--左右箭头-->
    <div class="arrow" style="display: none;">
        <div class="icon" id="icon1"><a href="#"><img src="images/sign_out.png"></a></div>
        <div class="icon" id="icon2"><a href="#"><img src="images/sign_in.png"></a></div>
    </div>
    <!-- 图片右下角序号部分 -->
    <ul class="indexList">
        <li class="indexOn"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

JQuery代码：

var curIndex = 0;//当前index的位置
//定时器自动变换图片，每4秒执行一次
var autoChange = setInterval(function () {
    if (curIndex < $(".imgList li").length - 1) {
        curIndex++;     //图片跳到下一张
    } else {
        curIndex = 0;
    }
    changeTo(curIndex);
}, 4000);
//图片循环部分
function changeTo(num) {
    $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn(800).addClass("imgOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).stop().addClass("indexOn");
}

$(function () {
      //点击小圆点是切换到对应的图片
    $(".indexList").find("li").each(function (item) {
        $(this).click(function () {
            clearInterval(autoChange); //把原先的动画清除
            changeTo(item);
            curIndex = item;
            <!-- 停止点击自动循环播放 -->
            autoChange = setInterval(function () {
                if (curIndex < $(".imgList li").length - 1) {
                    curIndex++;
                } else {
                    curIndex = 0;
                }
                //调用变换处理函数
                changeTo(curIndex);
            }, 4000);
        });
    });

    //显示隐藏箭头
    $('.OutDiv').hover(function () {
        $(".arrow").css("display", "block");
    }, function () {
        $(".arrow").css("display", "none");
    });


    
    //点击左箭头
    $("#icon1").click(function () {
        clearInterval(autoChange);//把原先的动画清除
        curIndex--;
        if (curIndex == -1) {
            curIndex = 4
        }
        changeTo(curIndex);
//  停止点击时重新自动播放
        autoChange = setInterval(function () {
            if (curIndex < $(".imgList li").length - 1) {
                curIndex++;
            } else {
                curIndex = 0;
            }
            changeTo(curIndex);
        }, 4000);
    });

    //点击右箭头
    $("#icon2").click(function () {
        clearInterval(autoChange);  //把原先的动画清除
        if (curIndex < $(".imgList li").length - 1) {
            curIndex++;
        } else {
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
        //                   停止点击时重新自动播放
        autoChange = setInterval(function () {
            if (curIndex < $(".imgList li").length - 1) {
                curIndex++;
            } else {
                curIndex = 0;
            }
            //调用变换处理函数
            changeTo(curIndex);
        }, 4000);
    });

});