JS实现循环输出元素点击切换与轮播效果

最新推荐文章于 2022-03-17 16:45:27 发布

多多_duoduo

最新推荐文章于 2022-03-17 16:45:27 发布

阅读量412

点赞数

文章标签： javascript html html5 typescript es6

本文链接：https://blog.csdn.net/weixin_40779234/article/details/108061579

版权

实现效果：
在这里插入图片描述
实现代码：
html--------->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="service_box">
        <div class="ser_item">类目a</div>
        <div class="ser_item">类目b</div>
        <div class="ser_item">类目c</div>
        <div class="ser_item">类目d</div>
        <div class="all_ser_box">
            <div class="ser_list" id="all_list_box" style="left: 0px; transition: all 0.25s ease 0s;">
                <div class="ser_item" onclick="all_service_switch(1)"><img src="" alt="">服务a</div>
                <div class="ser_item" onclick="all_service_switch(2)"><img src="" alt="">服务b</div>
                <div class="ser_item" onclick="all_service_switch(3)"><img src="" alt="">服务c</div>
                <div class="ser_item" onclick="all_service_switch(4)"><img src="" alt="">服务d</div>
                <div class="ser_item" onclick="all_service_switch(5)"><img src="" alt="">服务e</div>
                <div class="ser_item" onclick="all_service_switch(6)"><img src="" alt="">服务f</div>
                ......              
            </div>
        </div>
        <div class="ser_item">更多
            <div class="more_box">
                <div class="service_more" id="peiwan_more_service">
                    <div onclick="all_service_switch(1)"><img src="" alt="">服务a</div>
                    <div onclick="all_service_switch(2)"><img src="" alt="">服务b</div>
                    <div onclick="all_service_switch(3)"><img src="" alt="">服务c</div>
                    ......
                </div>
            </div>
        </div>
    </div>
</body>
</html>

重要CSS--------->

   .all_ser_box{
        width: 106*5px;
        height: 110px;
        overflow: hidden;
        position: relative;
    }
    .ser_list{
        position: absolute;
        top: 0;
        left: 0;
        height: 110px;
    }

JS--------->
全局变量：

 const all_list_box = document.getElementById('all_list_box');

声明变量：

 service_c_ind:3,   //服务展示位中心,即除了“更多”从右边数五个元素块的中心位

初始化加载JS：

 service_len //所有服务的数据列表长度
 all_list_box.style.width = Number(service_len) * 106 + 'px';  //元素的总宽度

点击切换函数：

/**
 *服务切换
*
* @param {*} ind   服务索引
* 
*/
all_service_switch(ind){
    let _this = this;  
    let DOM = $('.service_box .ser_item');
    let ser_DOM = $('.service_box .all_ser_box .ser_list .ser_item'); 
    let more_DOM = $('.service_more div');
    ind = Number(ind);    
    // 向左偏移
    if(ind < _this.data.service_c_ind){
        var left;
        //当前服务索引小于3
        if(_this.data.service_c_ind > 3){
            if(_this.data.service_c_ind - ind > 2 && ind == 1){
                left = (_this.data.service_c_ind - ind - 2) * 106;
            }else if(ind - _this.data.service_c_ind > 2 && ind == 2){
                left = (_this.data.service_c_ind - ind - 1) * 106;
            }else{
                left = ind - 2 <= 0 ? 106 : (_this.data.service_c_ind - ind) * 106;
            };             
            _this.data.service_c_ind = ind == 1 ? ind + 2 : ind == 2 ? ind + 1 : ind; 
            _this.data.service_left = _this.data.service_left + left;
        }            
    };
    // 向右偏移      
    if(ind > _this.data.service_c_ind){  
        var left;
        //当前中心位索引大于服务列表减2的长度                
        if(_this.data.service_c_ind < (Number(service_len) - 2)){
            if(ind - _this.data.service_c_ind > 2 && ind == Number(service_len)){
                left = (ind - _this.data.service_c_ind - 2) * 106;
            }else if(ind - _this.data.service_c_ind > 2 && ind == Number(service_len) - 1){
                left = (ind - _this.data.service_c_ind - 1) * 106;
            }else{
                left = ind + 2 > Number(service_len) ? 106 : (ind - _this.data.service_c_ind) * 106;
            };            
            _this.data.service_c_ind = ind == Number(service_len) ? ind - 2 : ind == Number(service_len) - 1 ? ind - 1 : ind; 
            _this.data.service_left = _this.data.service_left - left;
        }
        
    };
    all_list_box.style.left = _this.data.service_left  +'px';
     
    ser_DOM.eq(ind - 1).addClass('active').siblings().removeClass('active');
    more_DOM.eq(ind - 1).addClass('active').siblings().removeClass('active');
    _this.data.class_id = ser_DOM[ind -1].getAttribute('classid');   //当前服务id
    
},

多多_duoduo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现循环输出元素点击切换与轮播效果

实现效果：实现代码：html---------><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>
复制链接

扫一扫