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

来源：互联网发布：网页php的编程代码大全编辑：程序博客网时间：2024/05/29 05:54

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

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

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

阅读全文

0 0