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;
}
}
})
没有写复用,将就的用吧~~~