h5、tab图片滚动原生js代码

约定不等于承诺〃 2022-06-06 23:59 123阅读 0赞

h5、tab图片滚动原生js代码：  
1.先看看案例图片；  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
2.功能：a.点击tab中的款式，图片可以更换.b点击左右按钮图片可以更换，tab中的款式选中对应的。  
话不多说，直接上码：  
html

sass

#product-id{
        width: 100%;
        height: 963px;
        margin: auto;
        text-align: center;
        #style{
            position: absolute;
            left: 50%;
            margin-left: -360px;
            width: 720px;
            height: 36px;
            margin-top: 30px;
            cursor: pointer;
            li{
                width: 120px;
                height: 36px;
                float: left;
                border: 1px solid #AAAAAA;
                line-height: 36px;
                &:first-child{
                border-radius:4px 0 0 4px;
                }
                &:last-child{
                    border-radius: 0 4px 4px 0;
                }
    
            }
            .active{
                    background: #00AAFF;
                    color: #FFFFFF;
                    border: 1px solid #00AAFF;
                }
    
        }
        #product-img{
            position: absolute;
            left: 50%;
            margin-left: -690px;
            width: 1380px;
            height: 400px;
            margin-top: 143px;
            .glyphicon-left1{
                width: 22px;
                height: 42px;
                display: block;
                float: left;
                margin-left: 24px;
                background: url(../images/btn_left_white.png) 0 0 no-repeat;
                background-size: 100% 100%;
                margin-top: 161px;
                cursor: pointer;
                &:hover{
                    width: 24px;
                    height: 44px;
                    margin-top: 160px;
                    margin-left: 22px;
    
                }
            }
            .glyphicon-right1{
                width: 22px;
                height: 42px;
                display: block;
                float: left;
                background: url(../images/btn_right_white.png) 0 0 no-repeat;
                background-size: 100% 100%;
                margin-top: 161px;
                margin-left: 132px;
                cursor: pointer;
                &:hover{
                    width: 24px;
                    height: 44px;
                    margin-top: 160px;
                }
            }
            .img-div{
                float: left;
                width: 1022px;
                height: 400px;
                margin-left: 136.7px;
                overflow: hidden;
                >img{
                    height:400px;
                }
            }
    
        }
    }

//查看款式
    $('#style').on('click','li', function(){
        var _index = $(this).index();
        $(this).addClass('active')
        $(this).siblings().removeClass('active');
        var _img = $('.img-div').find('img');
        for(var i=0; i<_img.length; i++){
            if(_img.eq(i).index()==_index){
                _img.eq(i).addClass('active').removeClass('hide');
                _img.eq(i).siblings().addClass('hide').removeClass('active');
            }
        }
    })
    //左移动按钮1
    $('.glyphicon-left1').on('click', function(){
        var _img = $('.img-div').find('img');
        for(var i=0; i<_img.length; i++){
            if(_img.eq(i).hasClass('active')&&i>0){
                _img.eq(i).removeClass('active').addClass('hide');
                _img.eq(i-1).removeClass('hide').addClass('active');
                $('#style li').eq(i-1).addClass('active').siblings().removeClass('active');
                return;
            }
            if(_img.eq(i).hasClass('active')&&i==0){
                _img.eq(i).removeClass('active').addClass('hide');
                _img.eq(_img.length-1).removeClass('hide').addClass('active');
                $('#style li').eq(i-1).addClass('active').siblings().removeClass('active');
                return;
            }
        }
    })
    //右移动按钮1
    $('.glyphicon-right1').on('click', function(){
        var _img = $('.img-div').find('img');
        for(var i=0; i<_img.length; i++){
            if(_img.eq(i).hasClass('active')&&i<_img.length-1){
                _img.eq(i).removeClass('active').addClass('hide');
                _img.eq(i+1).removeClass('hide').addClass('active');
                $('#style li').eq(i+1).addClass('active').siblings().removeClass('active');
                return;
            }
            if(_img.eq(i).hasClass('active')&&i==_img.length-1){
                _img.eq(i).removeClass('active').addClass('hide');
                _img.eq(0).removeClass('hide').addClass('active');
                $('#style li').eq(0).addClass('active').siblings().removeClass('active');
                return;
            }
        }
    })

没有写复用，将就的用吧~~~

[SouthEast]: /images/20220607/1e4e192b0a294db2a3db7451079c78a2.png
[SouthEast 1]: /images/20220607/3157bfba42d5438e939d812407a2411c.png