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

h5、tab图片滚动原生js代码：
1.先看看案例图片；


2.功能：a.点击tab中的款式，图片可以更换.b点击左右按钮图片可以更换，tab中的款式选中对应的。
话不多说，直接上码：
html

<div id="product-id">
    <ul id="style">
        <li class="active">大屏单柜</li>
        <li>A款</li>
        <li>B款</li>
        <li>C款</li>
        <li>D款</li>
        <li>E款</li>
    </ul>
    <div id="product-img">
        <span class="glyphicon-left1"></span>
        <div class="img-div">
            <img src='images/1AA.png' class="img active"/>
            <img src='images/1A.png' class="img hide"/>
            <img src='images/1B.png' class="img hide"/>
            <img src='images/1C.png' class="img hide"/>
            <img src='images/1D.png' class="img hide"/>
            <img src='images/1E.png' class="img hide"/>
        </div>
        <span class="glyphicon-right1"></span>
    </div>
</div>

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;
            }
        }

    }
}

js

//查看款式
$('#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;
        }
    }
})

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