轮播图：京东为例

末蓝、 2022-02-26 02:50 172阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小小争520</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
    
    <div class="Photo-frame">
        
        <ul class="picBox clearFix" style="left: 0">
    
            <li><a href="#"><img src="zhutu1.jpg" alt=""></a></li>
            <li><a href="#"><img src="zhutu3.jpg" alt=""></a></li>
            <li><a href="#"><img src="zhutu4.jpg" alt=""></a></li>
            <li><a href="#"><img src="zhutu5.jpg" alt=""></a></li>
            <li><a href="#"><img src="zhutu6.jpg" alt=""></a></li>
        </ul>
    
        
        <div class="circles">
            <span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset"></span>
            <span in="1"></span>
            <span in="2"></span>
            <span in="3"></span>
            <span in="4"></span>
        </div>
    
    
        
        <div class="arrow" id="next"> > </div>
        
        <div class="arrow" id="prev"> < </div>
    
    
    </div>
    
    <script src="获取元素.js"></script>
    <script src="index.js"></script>
    </body>
    </html>
    
    
    
    
    
        /*获取元素  ---》 一个 */
        function my$(selector ) {
        
            /*判断？ #   */
            return document.querySelector(selector)
        }
        
        function my$All(selector ) {
        
            /*判断？ #   */
            return document.querySelectorAll(selector)
        }
    
    
    
    
    
    window.onload = function () {
    
        // ☆☆☆☆☆  如果你是先加后判断 判断条件应该是下标+1
        //1:手动播放
        /*
    
        * (1)当用户点击右箭头  下一张    照片盒子向左移动   left-=590px
        * (2)当用户点击左箭头  上一张    照片盒子向右移动
        * left+=590px
        *
        * */
        //相框
        var Photo_frame = my$('.Photo-frame')
        //照片盒子
        var picBox = my$('.picBox')
        //箭头
        var next = my$('#next') //右
        var prev = my$('#prev') //左
        var circles = my$('.circles')
        var circlesSpans = my$All('.circles span') //bug  my$() ===>my$All()
        console.log(circlesSpans)
        var index  = 0 ;// 标记当前有光圈的小圆点的下标
    
    
        /***********照片盒子运动函数  picBoxAnimation()
         * 参数：偏移量 +590 向右 上一张
         *            -590 向左  下一张
         * 返回值 无
         * ************/
    
        function picBoxAnimation(offset){
            var leftValue = parseInt(picBox.style.left); //数值类型
            var newLeft =  leftValue + offset    //照片盒子要运动的距离
            if(newLeft < -2360 ){ //向左走的趋势 当前已经展示的是第5张
    
                newLeft = 0;
            }
            if(newLeft > 0 ){
                newLeft = -2360
    
            }
    
            picBox.style.left = newLeft + 'px';
            console.log(picBox.style.left)  //只能获取行内样式
        }
    
        //右箭头
        next.onclick = function () {
            picBoxAnimation(-590)
            //右箭头朝右移动 加+
            index++; //4
            if(index === 5){
                index = 0;
            }
    
            buttonShow();
    
    
        }
        prev.onclick = function () {
            picBoxAnimation(+590)
            index--;
            if(index === -1){
                index = 4;
            }
    
    
    
            buttonShow();
    
    
        }
    
        //2:自动播放  定时器
        function play() {
            timer = setInterval(function () {
                next.onclick();
    
            },1000)
        }
        play();
    
        //s鼠标移入不动 清定时器
        Photo_frame.onmouseover = function () {
    
            clearInterval(timer) //清除定时器 停止自动轮播
        }
    
    
        //鼠标移开 重新自动轮播 play()
        Photo_frame. function () {
    
            play()
        }
    
    
        /*********小圆点
         * 1：随着图片移动
         * 2：鼠标切换相应（自定义属性 ）图片
         * **********/
    
    //小圆点移动函数  buttonShow()  参数 无 返回值 无
    
    
        function  buttonShow() {
    
            for(var i =0;i<circlesSpans.length ;i++){
    
                circlesSpans[i].style.boxShadow = '';//清除样式
    
    
            }
            circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7)  inset"
    
    
        }
    
        //鼠标移入哪个小圆圈 哪张图就显示
    
        //图片盒子运动偏移量 = (旧下标 index -新下标 )*590
    
        for(var i =0;i<circlesSpans.length ;i++){
            //给小圆圈绑定鼠标移入事件
            circlesSpans[i]. function () {
    
                //获取当前鼠标移入的那个小圆圈的下标 ===》 新下标
                var newIndex = this.getAttribute('in')
    
                console.log(newIndex)
                //根据产生的新下标和旧下标的差的到了照片移动的偏移量
                var currentOffset = (index-newIndex)*590
                //调用运动函数 ===》图片已经切换
                picBoxAnimation(currentOffset)
                //新旧更替 旧下标保存新下标
                index = newIndex ;
                //调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？
    
                buttonShow()
    
            }
    
        }
    
    }
    
    
    
    
    
    
    
    
    
    @charset "UTF-8";
    
    * {
        padding: 0;
        margin: 0;
    
    }
    img {
        display: block; /*转换块级元素*/
    }
    ul li {
        list-style: none;
    }
    /*清浮动的衣服*/
    .clearFix::after,.clearFix::before {
        content: '';
        display: block;
        line-height: 0;
        clear: both;
    
    }
    .Photo-frame {
        position: relative;
        width: 590px;
        height: 470px;
        border: 1px solid #ccc;
        margin: 100px auto;
        /*溢出隐藏*/
        overflow: hidden;
    }
    /*照片条*/
    .picBox {
        /*定位*/
        position: absolute;
        width: 2950px;
        height: 470px;
    
        top:0;
    
    }
    .picBox > li {
        float: left;
    
    }
    .arrow {
        position: absolute;
        top:50%;
        margin-top: -20px;
        width: 24px;
        height: 40px;
        background-color: rgba(45,45,45,.3);
        color: #fff;
        line-height: 40px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;/*鼠标小手样式*/
    
    }
    #next {
        right: 0;
    }
    #prev {
        left: 0;
    }
    .arrow:hover {
        background-color: rgba(45,45,45,.7);
    }
    /*小圆点*/
    .circles {
        position: absolute;
        bottom:20px;
        left: 50%;
        margin-left:-76px ;
        height: auto;
    
    }
    .circles span {
        display: inline-block;
        box-sizing: border-box;
        width: 14px;
        height: 14px;
        border: 3px solid rgba(255,255,255,.3);
        border-radius: 50%;
        margin-left: 10px;
        cursor: pointer;
        background-color: darkblue;
    
    
    }
    /*
    .circles span:hover {
        box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset;
    }*/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]: /images/20220226/bbb96b1dff3543ce98b9b8b17edae129.png