jQuery实现轮播图（自动+手动）（二）

jQuery实现轮播图（自动+手动）（二）

此处将在上一步的基础上进行轮播图实现

下面现分别将所涉及到的html5、css3、jQuery的代码贴出，

可自行完成功能实现！！！

1. 轮播图的实质是多张图片的水平平铺,及其左右移动。
2. 因此首先要通过float：left设置所需照片的水平平铺效果
3. 其次装载照片的盒子需要设置width：（=照片数量*单个照片的宽）
4. 设置装载照片的盒子overflow：hidden，进行溢出隐藏。
5. 必须在head中引用jQuery库
6. https://jquery.com/
7. https://www.bootcdn.cn/jquery/

HTML

 <div class="box clearfix">
        <!-- 背景图片开始 -->
        <div class="bgphoto" style="left: 0px;">
            <img src="./images/bgbox1.jpg" alt="1">
            <img src="./images/bgbox2.jpg" alt="2">
            <img src="./images/bgbox3.jpg" alt="3">
            <img src="./images/bgbox4.jpg" alt="4">
            <img src="./images/bgbox5.jpg" alt="5">
        </div>
        
       <!-- 左箭头开始 -->
        <div class="leftarrow">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou2"></use>
            </svg>
            <!-- <img src="images/rightarrow.png" alt=""> -->
        </div>
        <!-- 右箭头开始 -->
        <div class="rightarrow">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou3"></use>
            </svg>
            <!-- <img src="images/rightarrow.png" alt=""> -->
        </div>
        <!-- 下方点点 -->
        <div class="circle">
            <ul>
                <li index='1' class="addiconcolor"></li>
                <li index='2'></li>
                <li index='3'></li>
                <li index='4'></li>
                <li index='5'></li>
            </ul>
        </div>

CSS

.box {
    position: relative;
    top: 0px;
    left: -58px;
    width: 1226px;
    height: 460px;
    margin: 0px auto;
    overflow: hidden;
}
.box .circle .addiconcolor {
    color: red;
}
/* 背景图片开始 */
.box .bgphoto {
    float: left;
    position: absolute;
    width: 6130px;
    height: 460px;
}

.box .bgphoto img {
    float: left;
    width: 1226px;
    height: 460px;
}
/* <!-- 右箭头开始 --> */
.box .rightarrow,
.box .leftarrow {
    position: absolute;
    right: 0px;
    bottom: 180px;
    width: 50px;
    height: 100px;
}

.box .leftarrow {
    left: 234px;
}

.box .rightarrow>svg,
.box .leftarrow>svg {
    width: 50px;
    height: 50px;
    color: #777;
    margin-top: 25px;
}

.box .rightarrow:hover,
.box .leftarrow:hover {
    background: rgba(0, 0, 0, .5);
}

/* 下方点点开始 */
.box .circle {
    position: absolute;
    right: 430px;
    bottom: 20px;
    width: 200px;
    height: 20px;
    cursor: pointer;

}

.box .circle ul li {
    font-family: "icomoon";
    display: inline-block;
    font-size: 18px;
    margin-left: 10px;
    color: #fff;
    cursor: pointer;
}

jQuery

 var imgCounts = 5;
        var index = 1;
        var intervalId;
        var buttonSpan = $(".box .circle ul")[0].children;

        autoNextPage();

        function autoNextPage() {
            intervalId = setInterval(function () {
                nextPage(true);
            }, 1000);
        }
//鼠标移入事件
        $('.box').mouseover(function () {
            console.log("hah");
            clearInterval(intervalId);
        });
//鼠标移出事件
        $(".box").mouseout(function () {
            autoNextPage();
        });
//右键点击事件
        $(".rightarrow").click(function () {
            nextPage(true);
        });
//左键点击事件
        $(".leftarrow").click(function () {
            nextPage(false);
        });

        clickButtons();
//clickButtons方法的具体功能定义
        function clickButtons() {
            var length = buttonSpan.length;
            for (var i = 0; i < length; i++) {
                buttonSpan[i].onclick = function () {
                    $(buttonSpan[index - 1]).removeClass("addiconcolor");
                    if ($(this).attr("index") == 1) {
                        index = 5;
                    } else {
                        index = $(this).attr("index") - 1;
                    }
                    nextPage(true);
                };
            }
        }
//nextPage的方法功能定义
        function nextPage(next) {
            var targetLeft = 0;
            $(buttonSpan[index - 1]).removeClass("addiconcolor");
            if (next) {
                if (index == 5) {
                    targetLeft = 0;
                    index = 1;
                } else {
                    index++;
                    targetLeft = -1226 * (index - 1);
                }
            } else {
                if (index == 1) {
                    index = 5;
                    targetLeft = -1226 * (imgCounts - 1);
                } else {
                    index--;
                    targetLeft = -1226 * (index - 1);
                }
            }
//进行图片的轮播
            $(".box .bgphoto").animate({
                left: targetLeft + 'px'
            });
    //进行下方circle的切换事件
            $(buttonSpan[index - 1]).addClass("addiconcolor");
        }
        <script src=" https://at.alicdn.com/t/font_1679855_lnstght38e.js"></script>

实现效果

本文仅是个人经验总结，如有需要可留言。