使用jQuery实现图片轮播

图片轮播的基本原理如下图

 

 可以设置overflow：hidden来隐藏除了要显示的图片之外的图片（即其他三张图）

以下为实现代码

index.css文件放置css代码

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 100em;
    margin: 0 auto;
}
/* 所有图片div */
.myimage{
    position: absolute;
    width: 400%;
}
/* 单张图片 */
.myimage>img{
    width: 25%;
    height: 650px;
    float: left;
}
/* 显示图片div */
.carousel{
    width: 100em;
    height: 550px;
    overflow: hidden;
    position: relative;
}

.carousel:hover .commons{
    display: block;
}

/* 按钮共同样式 */
.commons{
    width: 50px;
    height: 150px;
    font-size: 3.4em;
    line-height:150px;
    text-align: center;
    background-color: rgba(161, 150, 150,0.3);
    display: none;
}
/* 左按钮 */
.btn-left{
    position: absolute;
    bottom: 43%;
}
/* 右按钮 */
.btn-right{
    position: absolute;
    bottom: 43%;
    left: 96.8%;
}

.cycle{
    width: 100px;
    height: 10px;
    position: absolute;
    left: 49%;
    bottom: 10%;
}

/* 圆点 */
.cycle>span{
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
}
.on{
    background-color: rgb(41, 39, 39);
}

index.html

 <div class="container">


        <!-- 图片轮播 -->
        <div class="carousel">
            <div class="myimage">
                <img src="image/1.jpeg" alt="pic1">
                <img src="image/2.jpeg" alt="pic2">
                <img src="image/3.jpeg" alt="pic3">
                <img src="image/4.jpeg" alt="pic4">
            </div>
            <div style="clear:both"></div>
            <div class="btn-left commons">&lt;</div>
            <div class="btn-right commons">&gt;</div>


            <div class="cycle">
                <span index="0" class="on"></span>
                <span index="1"></span>
                <span index="2"></span>
                <span index="3"></span>
            </div>

        </div>

    </div>

index.js

 $(function () {
            // 全局变量初始值
            var index = 0;
            // 轮播图的宽度 
            carouselWidth = $(".carousel").width();

            // 左移按钮点击事件
            $(".btn-left").click(function () {
                slidepage(true);
            })
            // 右移按钮点击事件
            $(".btn-right").click(function () {
                slidepage(false);
            })


            // 翻页函数 true上一页  false下一页
            function slidepage(myBoolean) {

                var offsetLeft = 0;    // 位移大小

                if (myBoolean) {

                    if (index == 0) {
                        index = 3;
                        offsetLeft = -carouselWidth * index;
                    }
                    else {
                        index--;
                        offsetLeft = -carouselWidth * index;
                    }
                }
                else {
                    if (index == 3) {
                        index = 0;
                        offsetLeft = 0;
                    }
                    else {
                        index++;
                        offsetLeft = -carouselWidth * index;
                    }

                }

                // 添加移动动画
                $(".myimage").animate({ left: offsetLeft + "px" }, 300);
                // 圆点跟随移动
                $(".cycle>span").eq(index).addClass("on").siblings().removeClass("on");
            }

            // 周期轮播
            setInterval(slidepage, 4000);


            // 点击圆点移动到相应图片
            $(".cycle>span").click(function () {
                // 相应圆点亮
                $(this).addClass("on").siblings().removeClass("on");
                //点击圆点赋予相应位移  赋值给全局变量
                index = $(this).attr("index");
                $(".myimage").animate({ left: -carouselWidth * index + "px" }, 200);
            });