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++;
}
}
});
})();
});