【 using jQuery to achieve the effect of wheel play graph 】

First, redo the training task of round broadcast graph

1. Task Overview

JS rotation map task card is consistent, this time you need to apply jQuery to complete.

For details, please refer to www.jd.com/

2. Reference code

2.1 Key Summary

1) Select the LI label in imgList

var imgs = $("#imgList li");
Copy the code

2) Traverse the LI tag and set multiple CSS styles at once

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

3) Bind mouse in and out events to labels

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

4) Get the index of the Li label for mouse click

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

2.2 Reference Code

In order to show the advantages of jQuery on PC and the differences between the last task, the code retains part of the logic of the last task.

For ease of reading, the comments will be as standardized as possible, and the guys you guys understand will be better with a thumbs up

<!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>
Copy the code

【 using jQuery to achieve the effect of wheel play graph 】

1. Task Overview

2. Reference code

2.1 Key Summary

2.2 Reference Code

Related Posts

Do you know the minimum and maximum heap? Learn about the use of the heap in the front end

Landing,

Vue3 — Encapsulates the counter component itself