css:
.displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{position: relative;}.margin0Auto{margin: 0 auto;} .qS_picBox{width: 1000px;height: 550px;padding-bottom: 20px;} .qS_switchIcon{width: 39px;height: 71px;margin-top: 235px;} .qs_pic{width: 760px;height: 450px;margin: 45px 0 0 80px;} .qS_picBottom{width: 1340px;height: 130px;padding-bottom: 160px;} .qS_switchIcon2{width: 39px;height: 71px;margin-top: 30px;} .qS_botPicBox{height: 100%;margin-left: 35px;overflow: hidden;} .qS_botPicBoxIn{width: 20000px;height: 100%;} .qS_botPic:nth-of-type(5n){margin-right: 0!important;} .qS_botPic{width: 220px;height: 130px;margin-right: 25px;}
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>****</title> </head> <body> <article class="qS_picBottom margin0Auto"> <i class="displayB qS_switchIcon2 fl cursor qS_pre"><img src="../img/qS_pre.png" alt="" class="mI_img"></i> <article class="fl qS_botPicBox w posRe"> <section class="qS_botPicBoxIn posAb"> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i> </section> </article> <i class="displayB qS_switchIcon2 fr cursor qS_next"><img src="../img/qS_next.png" alt="" class="mI_img"></i> </article> </body> </html>
js:
$(function () { ~(function() { var page = 1; var num = 5; var _pre = $(".qS_pre"); var _next = $(".qS_next"); var _boxIn = $(".qS_botPicBoxIn"); var _width = $(".qS_botPicBox").width(); var _picLen = $(".qS_botPic").length; var _pageCount = Math.ceil(_picLen/num);//滚动的页码 _pre.click(function() { /*原理：1.布局：两层盒子，外层固定宽度并且相对定位，里层盒子无穷大宽度并且绝对定位。 2.运动：点击时判断里层盒子是个否处在动画状态中，不在动画状态中时进行运动。运动时每次运动一个外层宽度的单位。 */ if(!_boxIn.is(":animated")){//判断元素是否处在动画状态 if(page == 1){//当前第一页 _boxIn.animate({left:'-='+ _width*(_pageCount-1)},"slow");//里层总宽度*（图片的总数/可显示的个数-1） page =_pageCount; }else{ _boxIn.animate({left:'+='+ _width},"slow");//不是当前第一页时不断地加一个宽度 page--; } } }); _next.click(function() { if(!_boxIn.is(":animated")){ if(page == _pageCount){ _boxIn.animate({left:'0px'},"slow"); page =1; }else{ _boxIn.animate({left:'-='+_width},"slow"); page++; } } }); })(); });