js图片左右切换

<div class="strategy-swiper-box">
<div class="swiper-btn swiper-prev img-none"> div>
<div class="swiper-box">
<div class="swiper-box-list">
<ul>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
<li><a href="javascript:;"><img src="brand_fj.jpg" alt="" />a>li>
ul>
div>
div>
<div class="swiper-btn swiper-next"> div>
div>

.strategy-swiper-box{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 147px;
    background: #fff;
}
.swiper-box{
    position:relative;
    float:left;
    width:85%;/* 1160px; */
    height:100px;
    margin-top:12px;
    display:inline-block;
    overflow:hidden;    
}
.swiper-box>.swiper-box-list{
    position:absolute;
    width:4000px;
}
.swiper-box>.swiper-box-list ul li{
    float:left;
    width:183px;
    height:100px;
    margin:0 5px;
}
.swiper-box>.swiper-box-list ul li a{
    display:block;
    width:100%;
    height:100%;
    border:0;
}
.swiper-box>.swiper-box-list ul li a>img{
    display:block;
    width:100%;
    height:100%;
    border:1px solid #ddd;
}
.swiper-box>.swiper-box-list ul li a>img:hover{
    border:2px solid rgb(255,153,0);
}
.swiper-btn{
    position:relative;
    float: left;
    width: 7.5%;
    height: 100px;
    font-size: 25px;
    color: rgb(130,130,130);
    text-align: center;
    margin-top: 12px;
    cursor: pointer;
}
.swiper-btn>.img{
    position:absolute;
    left:50%;
    top:50%;
    margin:-10.5px 0 0 -6px;
}

.suspension-btn{
    position:fixed;
    left:8px;
    top:50%;
    z-index:999;
    width:60px;
    height:60px;
    margin-top:-30px;
    
}
.suspension-btn a{
    display:block;
    padding:6px;
    font-size:18px;
    color:#fff; 
    position:absolute;
    top: 0px;
    background:rgba(0,0,0,0.3);
}
.swiper-btn>i.img{
    display:inline-block;
    width:12px;
    height:21px;    
}
.swiper-btn.swiper-prev>i.img{
    background:url(left-dire.png) no-repeat;
    background-size:100% 100%;
}
.swiper-btn.swiper-prev.img-none{
    cursor: not-allowed !important;    
}
.swiper-btn.swiper-prev.img-none>i.img{
    background:url(left-dire-none.png) no-repeat;
    background-size:100% 100%;
}


.swiper-btn.swiper-next>i.img{
    background:url(right-dire.png) no-repeat;
    background-size:100% 100%;
}
.swiper-btn.swiper-next.img-none{
    cursor: not-allowed !important;    
}
.swiper-btn.swiper-next.img-none>i.img{
    background:url(right-dire-none.png) no-repeat;
    background-size:100% 100%;
}
.suspension-btn>a.glyphicon-chevron-left{
    left: -10px;
}
.suspension-btn>a.glyphicon-chevron-up{
    left:20px;
}
.suspension-btn>a:focus,
.suspension-btn>a:hover{
    background:rgba(0,0,0,0.4);
    text-decoration:none;
    
}

.repStrategy{
    width:80%;
    height:500px;
}

$('.swiper-next').click(function(){debugger;
        var  box = $('.swiper-box'),
             box_list = $('.swiper-box-list'),
             box_width = box.width(),
             liLength = box.find('li').length,
             liWidth = box.find('li').width() + 10,
             i = box_width/liWidth,
             box_left = box_list.position().left,
             thisHasClassNone = $(this).hasClass('img-none'),
             leftHasClassNone = $(this).siblings('.swiper-btn');
             
        if(thisHasClassNone){//到最后时
            return;
        }else if(leftHasClassNone.hasClass('img-none') && box_width/liWidth>=2){//超过两页，第一次点时            
            leftHasClassNone.removeClass('img-none');
            box_list.animate({ left:'-='+box_width }, "slow");
        }else if(leftHasClassNone.hasClass('img-none') && box_width/liWidth < 2){//不过两页，第一次点时
            box_list.animate({ left:(liLength-i)*liWidth}, "slow");
            $(this).addClass('img-none');
            leftHasClassNone.removeClass('img-none');
        }else if(liLength%i == 0 && (liLength*liWidth + box_left) > box_width){//超过两页，不是第一次点击，而且再翻页都还没到底时
            box_list.animate({ left:box_width}, "slow");
        }else{
            box_list.animate({ left:box_left - (liLength*liWidth - Math.abs(box_left) - box_width)}, "slow");
            $(this).addClass('img-none');
        }
        
    });
    $('.swiper-prev').click(function(){debugger;
        var  box = $('.swiper-box'),
            box_list = $('.swiper-box-list'),
            box_width = box.width(),
            liLength = box.find('li').length,
            liWidth = box.find('li').width() + 10,
            i = box_width/liWidth,
            box_left = box_list.position().left,
            thisHasClassNone = $(this).hasClass('img-none'),
            rightHasClassNone = $(this).siblings('.swiper-btn');
        if(thisHasClassNone){//最开始
            return;
        }else if(rightHasClassNone.hasClass('img-none') && box_width/liWidth>=2){//超过两页，第一次往左点时            
            rightHasClassNone.removeClass('img-none');
            box_list.animate({ left:(box_left + box_width) }, "slow");
        }else if(rightHasClassNone.hasClass('img-none') && box_width/liWidth < 2){//不过两页，第一次往左点时
            box_list.animate({ left:liLength*liWidth - box_width}, "slow");
            $(this).addClass('img-none');
            rightHasClassNone.removeClass('img-none');
        }else if(liLength%i == 0 && (liLength*liWidth + box_left) > box_width){//超过两页，不是第一次点击，而且再翻页都还没到底时
            box_list.animate({ left:box_left + box_width}, "slow");
        }else{//超过两页，不是第一次点击，再点击就到底，而且最后滑动不到一页时
            box_list.animate({ left:'0'}, "slow");
            $(this).addClass('img-none');
        }
    })

 

 

转载于:https://www.cnblogs.com/zzwlong/p/9871524.html