正文
css 的通用样式 设置 和倒计时功能 移动轮播图的手势滑动的功能
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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: ;
padding: ;
/*
盒模型，改变盒子的计算大小的方式。
*/
box-sizing: border-box;
/*移动浏览器基本上的内核都是webkit*/
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body{
color: #;
/*
字体样式，默认是微软雅黑， 默认当前设备自带的字体。
*/
font-family: "Microsoft YaHei", sans-serif;
font-size: 14px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
color: #;
}
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.onload=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.onscroll=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); }
