css 的通用样式设置和倒计时功能移动轮播图的手势滑动的功能

最新推荐文章于 2022-05-09 13:09:35 发布

weixin_34297704

最新推荐文章于 2022-05-09 13:09:35 发布

阅读量201

点赞数

body{
    line-height:1.4;
    color:#333;
    font-family:arial;
    font-size: 12px;
    background:white;
}
input,textarea,select{
    font-size:12px;
    font-size:100%;    
    font-family:arial;
    font-family:inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
    margin:0;
}
h4,h5,h6{
    font-size:1em;
}
ul,ol{
    padding-left:0; 
    list-style-type:none;
}
/*image with no-border*/
a img{border:0;}
img{border:0;}

*,::before,::after{
     margin: 0;
     padding: 0;
     /*
       盒模型，改变盒子的计算大小的方式。
     */
     box-sizing: border-box;
     /*移动浏览器基本上的内核都是webkit*/
     -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
body{
     color: #333;
     /*
       字体样式，默认是微软雅黑， 默认当前设备自带的字体。
     */
     font-family: "Microsoft YaHei", sans-serif;

     font-size: 14px;
}

a{
     text-decoration: none;
}
a:hover{
     text-decoration: none;
    color: #333;
}
ol,ul{
    list-style: none;
}
/*
  表单里面的input 框默认样式很丑
*/
input{
     border: none;
     outline: none;
     appearance:none;
     /*
        清楚input 原有的样式。
     */
     -webkit-appearance: none;
}
/*
       获取页面上面所有的元素，class 的值以icon_ 开头。
*/
[class^=icon_]{
     background: url("../images/sprites.png");
     background-size: 200px 200px;
}

/*提炼浮动*/
.f_left{
     float: left;
}
.f_right{
     float: right;
}

body{
    background: #f5f5f5;
}
/*顶部通栏*/
.jd_layout{
     max-width: 640px;
     min-width: 320px;
     margin: 0 auto;
     height: 1000px;
}


.jd_header{
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 40px;
     z-index: 1000;
}

.jd_header>.jd_header_box{
    max-width: 640px;
    min-width: 320px;
    height: 40px;
    background:rgba(201,21,35,0) ;
    margin: 0 auto;
    position: relative;
}
.jd_header>.jd_header_box .icon_logo{
    background-position: 0 -103px;
    position: absolute;
    left: 3px;
    top: 5px;
    width: 60px;
    height: 30px;
}
.jd_header>.jd_header_box .login{
    position: absolute;
    right: 3px;
    top: 0px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
}
.jd_header>.jd_header_box form{
    padding-left: 65px;
    padding-right: 45px;
}
.jd_header>.jd_header_box form input{
     width: 100%;
     height: 30px;
     margin-top: 5px;
     border-radius: 15px;
     padding-left: 30px;
}
.jd_header>.jd_header_box form .icon_search{
     position: absolute;
     left: 73px;
     width: 20px;
     height: 20px;
     top: 10px;
     background-position: -60px -109px;
}

/*轮播图*/
.jd_banner{
    /*640px*/
     width: 100%;
     overflow: hidden;
     position: relative;
}
.jd_banner ul:nth-child(1){
     width: 1000%;
     transform: translateX(-10%);
}
.jd_banner ul:nth-child(1)>li{
    width: 10%;
    float: left;
}
.jd_banner ul:nth-child(1)>li>a{
    display: block;
}
.jd_banner ul:nth-child(1)>li>a>img{
    width: 100%;
    vertical-align: bottom;
}
.jd_banner ul:nth-child(2){
     position: absolute;
     left: 50%;
     width: 118px;
     bottom: 6px;
     margin-left: -59px;
     height: 6px;
}
.jd_banner ul:nth-child(2) li{
     border: 1px solid #fff;
     height: 6px;
     width: 6px;
     border-radius: 50%;
     margin-left: 10px;
     float: left;
}
.jd_banner ul:nth-child(2) li.now{
     margin-left: 0;
     background: #fff;
}

/*nav*/
.jd_nav{

}
.jd_nav>ul{
     width: 100%;
     background: #fff;
     border-bottom: 1px solid #ccc;
     overflow: hidden;
}
.jd_nav>ul>li{
     width: 25%;
     float: left;
     text-align: center;
     margin: 10px 0;
}
.jd_nav>ul>li>a{

}
.jd_nav>ul>li>a>img{
     width: 40px;
     height: 40px;
}
.jd_nav>ul>li p{
     font-size: 12px;
}

/*商品区域*/
.jd_product>.jd_product_box{
     min-height: 300px;
}

.jd_product>.jd_product_box>.product_tit{
     height: 30px;
     border-bottom: 1px solid #ccc;
}

.jd_product>.jd_product_box>.product_tit>h3::before{
     content: '';
     width: 5px;
     height: 20px;
     display: block;
     background: rgba(201,21,35,0.85);
     position: absolute;
     left: 3px;
     top: 5px;
}

.jd_product>.jd_product_box>.product_tit>h3{
     font-weight: normal;
     position: relative;
     padding-left: 15px;
     height: 30px;
     line-height: 30px;


}
/*秒杀区域*/
.jd_sk{

}
.jd_sk .seconds_kill{
     background: url("../images/seckill-icon.png");
     background-size: 16px 20px;
     margin-left: 5px;
     margin-top: 5px;
     width: 16px;
     height: 20px;
     float: left;
}
.jd_sk .seconds_text{
     height: 30px;
     line-height: 30px;
     float: left;
     margin-left: 10px;

}
.jd_sk .sk_time{
     float: left;
     margin-left: 10px;
     height: 30px;
     line-height: 30px;
}
.jd_sk .sk_time>span{
      background: #000;
      color: #fff;
}

.jd_sk .sk_time>span:nth-child(3n){
       background: #fff;
       color: #000;
}
.jd_sk .right_more {
       height: 30px;
       line-height: 30px;
       margin-right: 10px;
}

轮播图的功能实现 移动端的手势滑动；
window.οnlοad=function(){
    /*滚动条滚动，*/
    search();

    //轮播图
    banner();

    //倒计时
    downTime();
}
/*搜索框滚动*/
function search(){
    /*
    * 1: 我要获取到轮播图的高度
    * 2：我要获取到顶部的header
    * */
    var header_box=document.querySelector(".jd_header_box");
    var banner=document.querySelector(".jd_banner");
    var h=banner.offsetHeight;
    //监控滚动条滚动
    window.οnscrοll=function(){
        var opacity=0;
        //滚动条的距离
        var top=document.body.scrollTop;
        if(top<h){
             opacity=top/h*0.85;
        }else{
            opacity=0.85;
        }
         //我在滚动的时候我要去改透明度
        header_box.style.background="rgba(201,21,35,"+opacity+")";
    }
}

function　banner(){
        /*
        * 1: 获取页面上面dom 元素
        * 2：动态的去滚动  定时器， translateX() transition
        * 3:图片滚动，盒子对应的点随着变化
        * 4：图片跟着我的手指触摸的位置的变化而变化
        * 5：我的手指滑动，当滑动超过一定的距离
        *         我就跳到下一张
        *         没有超过一定的距离，
        *         吸附回去
        * */
        //获取到的是轮播的外面的带盒子
        var banner=document.querySelector(".jd_banner");
        //
        var imageBox=banner.querySelector("ul:first-child");

        var pointsBox=banner.querySelector("ul:last-child");
        //获取到屏幕的宽度
        var  w=banner.offsetWidth;
        //获取到所有的点
        var pointlis=pointsBox.querySelectorAll("li");

        //我用来记录这个图片盒子的索引
        var index=1;

        var addTransition=function(){
            imageBox.style.transition="all 0.2s";
            imageBox.style.webkitTransition="all 0.2s";
        };

        var removeTransition=function(){
            imageBox.style.transition="none";
            imageBox.style.webkitTransition="none";
        }

        //位置移动。
        var addTranslate=function(w){
            imageBox.style.transform="translateX("+w+"px)";
            imageBox.style.webkitTransform="translateX("+w+"px)";
        }


          var timer=setInterval(function(){
               index++;
                //添加过度
               addTransition();
               //必须动态的去改谁
               addTranslate(-index*w);
          },1000);
           /* //我需要把动态的滚动做出来。我必须就要添加定时  *我可以transitionEnd*/
         itcast.transitoinEnd(imageBox,function(){
            if(index<=0){
                index=8;
                removeTransition();
                addTranslate(-index * w);
            }
            else if(index>=9){
                index=1;
                removeTransition();
                addTranslate(-index * w);
            }
            //修改盒子点的样式。
            setPoint(index);
         });
        /* 修改  盒子的点的样式*/
        var setPoint=function(index){
                for(var i=0;i<pointlis.length;i++){
                    //把一个class 等于移除掉
                    pointlis[i].classList.remove("now");
                }
                //给每个轮播对应的点添加样式。
                console.log(index);
               pointlis[index-1].classList.add("now");
        };
        /*
        * 1:我的触屏移动，imageBox 跟着移动
        * 2：假设我触屏结束，判断的触屏滑动的距离，如果说超过了一定的距离，我就跳到下一张，
        * 否则吸附回去。
        *
        * */

        //这个是用来记录触屏开始的点的位置。
        var startX=0;

        //移动的触摸点的位置x
        var moveX=0;

        //移动的距离
        var distinceX=0;

        //判断我的触摸是否移动
        var isMove=false;





        //触屏开始
        imageBox.addEventListener("touchstart",function(event){
                console.log("start");
                //触摸开始，循环结束
                clearInterval(timer);
                //记录触摸的起点位置。
                /*
                * event 里面记录所有的触摸点，肯定也会记录触摸点的位置，
                * 怎么去获取水平的位置。
                * */
                 startX=event.touches[0].clientX;
                 console.log(event.touches[0].clientX);

        });
        //移动
        imageBox.addEventListener("touchmove",function(event){
                console.log("move");
                //记录触摸点移动的位置。
                isMove=true;
                //我的轮播图肯定要跟着我的触摸点进行移动
                moveX=event.touches[0].clientX;
                //console.log(moveX);
                //我需要startX 与moveX 位置计算出来。
                distinceX=moveX-startX;  //这里的值可能是正数，也可能是负数
                //当前imageBox 要移动的距离
                var current=(-index*w)+distinceX;
                //我要移除这个过度，否则，会有卡顿的效果。
                removeTransition();
                addTranslate(current);



        })
        //触屏离开
        imageBox.addEventListener("touchend",function(){
                 console.log("end")
                 /*
                 * 判断用户触摸移动的距离。如果没有超过一定的位置，我们就要吸附回去
                 * 如果超过了一定的位置，我还需要判断是滑动下一张，还是上一张。
                 * */
                 if(isMove && Math.abs(distinceX)>w/3){
                        //图片移动
                        //我要判断是向左还是向右滑动
                        if(distinceX>0){
                                index--;
                        }else{
                                index++;
                        }

                         //吸附回去
                         addTransition();
                         addTranslate(-index*w);
                 }else{
                        //吸附回去
                        addTransition();
                        addTranslate(-index*w);
                 }


                //触摸结束，循环继续
                timer=setInterval(function(){
                    index++;
                    //添加过度
                    addTransition();
                    //必须动态的去改谁
                    addTranslate(-index*w);
                },1000);
        })
}
// 15:59:59 倒计时的功能实现；
    function downTime(){
            //这个时间是从后台获取到的，发送一个请求，服务器返回数据，返回的是一个时间。
            var timeinfo=60*60*15;

            var spans=document.querySelectorAll(".sk_time>span");

            setInterval(function(){


                if(timeinfo<=0){
                    //发送一个请求给服务器。返回一些数据更换掉秒杀的商品。
                    return;
                }

                timeinfo--;

                //把这个时间格式化之后放在

                var h=Math.floor(timeinfo/3600);

                //分钟
                var m=Math.floor(timeinfo%3600/60);

                //秒
                var s=timeinfo%60;

                spans[0].innerHTML=Math.floor(h/10);
                spans[1].innerHTML=h%10;

                //分钟
                spans[3].innerHTML=Math.floor(m/10);
                spans[4].innerHTML=m%10;

                //秒钟
                //分钟
                spans[6].innerHTML=Math.floor(s/10);
                spans[7].innerHTML=s%10;
            },1000);




    }