.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; varbox = $('.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; varbox = $('.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'); } })
【js图片左右切换】
转载于:https://www.cnblogs.com/zzwlong/p/9871524.html
