一，重做轮播图训练任务

1，任务概述

JS 中轮播图任务卡一致，此次需要大家应用 jQuery 来完成。

具体效果参考网址：https://www.jd.com/

2，参考代码

2.1 重点摘要

1）选择imgList中的li标签

var imgs = $("#imgList li");

2）遍历li标签，并一次性设置多个css样式

$("#iconList li").each(function(){
    if($(this).index() == index){
        $(this).css({"border":"2px solid gray","borderColor":"rgba(128,128,128,0.5)","top":"0px"});
    }else{
        $(this).css({"border":"none","top":"2px"});
    }
});

3）为标签绑定鼠标移入移出事件

$("#imgList").mouseout(function(){
    doStart();
}).mouseover(function(){
    clearInterval(timer);
    index = (index - 1 + imgs.length) % imgs.length;
});

4）获得鼠标点击的li标签下标

$("#iconList li").mouseover(function(){
    index = $(this).index();
    doStart();
});

2.2 参考代码

为了显示jQuery在PC端的优势、对比上次任务的不同之处，代码中保留了上次任务的部分逻辑；

为便于阅读，注释代码已尽可能规范，喜欢并支持的朋友点个赞再欣赏呗（づ￣3￣）づ╭❤～

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图设计——jQuery实现</title>
    <script src="./jquery-3.5.0.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;       /* 消除列表的原点 */
            text-decoration: none;  /* 消除链接下划线 */
        }
        /* 整体展示框架的样式 */
        #container{
            width: 386px;
            height: 260px;
            left: 500px;
            top: 200px;
            overflow: hidden;       /* 超出部分选择隐藏 */
            border: 0.5px solid gray;/* 边框设置为黑色 */
            position: relative;     /* 框架采用相对定位 */
        }
        /* 图片列表的样式 */
        #imgList{
            width: 1930px;          /* 所有图片累计的宽度386 * 5 */
            height: 260px;
        }
        /* 单个图标的样式 */
        #imgList li{
            float: left;            /* 浮动靠左排列 */
            transition: opacity 300ms ease-in-out 0.5s;
            transition-duration: 0.5s;/* 过渡动画 但是好像没有起作用 应该是没有定义过渡后的效果*/
        }
        /* 下方小圆点图标列表样式 */
        #iconList{
            position: absolute;     /* 绝对定位 */
            width: 75px;            /* 设定整体规格、位置 */
            height: 10px;
            left: 20px;
            bottom: 10px;
        }
        /* 小图标的定位 */
        #iconList li{
            position: relative;
            float: left;
            margin-left: 5px;       /* 扩大圆点间距 */
            width: 10px;
            height: 10px;
            cursor: pointer;        /* 将鼠标图形变成小手样式 */
            border-radius: 50%;     /* 设置为圆形 */
            background-color:white;
            opacity: 0.75;          /* 透明度 */
            top: 2px;               /* 普通小圆点距顶端距离 为了使选中小圆点添加边框后仍然保持对齐 */
        }
        /* 字体图标实现左右移动图片的功能 */
        @font-face {
            font-family: 'fontello';
            src: url('./font/fontello.eot?33765623');
            src: url('./font/fontello.eot?33765623#iefix') format('embedded-opentype'),
                url('./font/fontello.woff?33765623') format('woff'),
                url('./font/fontello.ttf?33765623') format('truetype'),
                url('./font/fontello.svg?33765623#fontello') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        /* 设置字体图标的整体样式 */
        .icon{
            font-family: 'fontello';
            color: white;
        }
        /* 左边字体图标的样式 */
        #iconLeft{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            left: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            line-height: 30px;      /* 保证字体图标上下居中 */
            text-align: left;       /* 靠左 */
        }
        /* 右边字体图标的样式 */
        #iconRight{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            right: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 30px;
            text-align: right;      /* 靠右 */
        }
    </style>
</head>
<body>
    <div id="container" >
        <!-- 由于展示图片后index立刻加一 为了显示上一张图片 这里需要减二 -->
        <!-- <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div> -->
        <div class="icon" id="iconLeft"></div>
        <!-- 由于展示图片后index立刻加一 为了显示下一张图片 这里不需要更改 -->
        <div class="icon" id="iconRight"></div>
        
        <!-- <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()"> -->
        <ul id="imgList">
            <li><a href=""><img src="./images/17.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/18.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/19.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/20.jpg" alt=""></a></li>
        </ul>
 
        <ul id="iconList">
            <!-- <li onmouseover="locate(0)"></li>
            <li onmouseover="locate(1)"></li>
            <li onmouseover="locate(2)"></li>
            <li onmouseover="locate(3)"></li> -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
    </div>
    <script>
        // 习惯性的添加入口函数
        $(function(){
            // 初始化图片位置
            var index = 0;
            // 获取图片标签
            // var imgs = document.getElementById("imgList").getElementsByTagName("li");
            var imgs = $("#imgList li");
            // 获取图标列表
            // var icons = document.getElementById("iconList").getElementsByTagName("li");
            var icons = $("#iconList li");
            // 设置定时器
            var timer;
            // 开始轮播
            doStart();
            
            // 展示图片和小图标(通用方法)
            function show(){
                index = (index + imgs.length) % imgs.length;// 保证不越界
                changeImg();
                changeIcon();
                index++;                    // 下标自增
            }
            
            // 启动定时轮播(通用方法)
            function doStart(){
                show();                     // 先执行一次
                if(timer != null){
                    clearInterval(timer);
                    timer = null;
                }
                timer = setInterval(show,3000);
            }
            
            // 根据index 修改当前位置的圆点样式
            function changeIcon(){
                $("#iconList li").each(function(){
                    if($(this).index() == index){
                        $(this).css({"border":"2px solid gray","borderColor":"rgba(128, 128, 128, 0.5)","top":"0px"});
                    }else{
                        $(this).css({"border":"none","top":"2px"});
                    }
                });
                // for(var i = 0; i < imgs.length; i++){
                //     if(i == x){
                //         // icons[i].style.border="2px solid gray"
                //         // icons[i].style.borderColor="rgba(128, 128, 128, 0.5)";
                //         // icons[i].style.top="0px";// 保证居中
                //     }else{
                //         icons[i].style.border="none";
                //         icons[i].style.top="2px";// 保证居中
                //     }
                // }
            }

            // 根据index 通过修改marginLeft展示不同图片
            function changeImg(){
                if(index == 0){
                    // document.getElementById("imgList").style.marginLeft = "0px";
                    $("#imgList").css("marginLeft","0px");
                }else{
                    // document.getElementById("imgList").style.marginLeft = -index * 386+"px";
                    $("#imgList").css("marginLeft",-index * 386+"px");
                }
            }
            
            // 设计图片列表的鼠标移入移出事件
            $("#imgList").mouseout(function(){
                doStart();
            }).mouseover(function(){
                clearInterval(timer);
                // 由于展示完当前图片后index立即加一,若鼠标悬停在图片上之后移开，会立刻显示第二张图片，所以减一
                // 为了避免index出现负数，进行取模运算
                index = (index - 1 + imgs.length) % imgs.length;
            });
            // 暂停定时轮播(直接在script中绑定鼠标事件，所以这里将原先在HTML中的doStop取消了)
            // function doStop(){
            //     clearInterval(timer);
            //     index = (index - 1 + imgs.length) % imgs.length;
            // }
            
            
            // 根据选择的圆点来确定图片(这里点击事件的索引index感知点击的哪个li标签，取代了传参的方法)
            $("#iconList li").mouseover(function(){
                index = $(this).index();
                doStart();
            });
            // function locate(x){
            //     index = (x + imgs.length) % imgs.length;
            //     doStart();
            // }

            // 绑定左右图标点击事件
            $("#iconLeft").click(function(){
                // 由于展示完当前图片后index立即加一,若要显示上一张图片，需要减二
                index = index - 2;
                doStart();
            });
            $("#iconRight").click(function(){
                doStart();
            });
            
        });
        
    </script>
</body>
</html>

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

任务卡_04-前端技术_简洁高效的jQuery【用jQuery实现轮播图效果】

一，重做轮播图训练任务

1，任务概述

2，参考代码

2.1 重点摘要

2.2 参考代码

猜你喜欢