基于jQuery的一组图片的滚动

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

 

posted @ 2017-10-11 15:18  seafwg  阅读(280)  评论(0)  编辑  收藏  举报