京东案例js(标题栏透明度，倒计时，轮播图自动播放)
2018-03-21 22:21
429 查看
1.sublime字体放大：command++
2.引入js文件，在引入css文件link下面script引入js文件 http://emmet.evget.com/ 查找emmet快捷键的网页 script:src
3.scroll有兼容性问题，必须<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="en">才可以使用（真的醉，查错N久）
4.选择多个元素要用querySelectorAll（今天一直犯这种错误。。）
window.onload=function(){
headScroll();
cutDownTime();
banner();
}
function headScroll(){
//获取元素 header(透明度要改变的元素),nav（透明度的改变程度是屏幕卷到nav最底下时完全变为1）
var header = document.querySelector(".header");
var nav = document.querySelector(".nav");
//offsetTop是nav距顶部的距离，offsetHeight是nav本身的高度
var height = nav.offsetTop+nav.offsetHeight;
// 绑定屏幕滚动事件
window.onscroll=function(){
//获取屏幕卷起的高度
var scrollHeight = window.document.body.scrollTop;
// 计算百分数，因为透明度是一点点变化的
var percent = scrollHeight/height;
if(percent>1){
percent=1;
}
//用rgba来设置透明度，因为如果用opacity设置，会影响子盒子的透明度
header.style.backgroundColor="rgba(201,21,35,"+percent+")";
}
}
function cutDownTime(){
//获取元素 .main:nth-child(1) .main_top ul li
var lisArr = document.querySelectorAll(".main:nth-child(1) .main_top li");
//定义总的时间
var totalHour = 3;
var totalSecond = totalHour*60*60;
//开启定时器
var timeId = setInterval(function(){
//判断总时间如果小于等于0 ，就清空定时器，并跳出定时器
if(totalSecond<=0){
clearInterval(timeId);
return;
}
totalSecond--;
var hour = Math.floor(totalSecond/3600);
var minute = Math.floor(totalSecond%3600/60);
var second = totalSecond%60;
for(var i=0;i<lisArr.length;i++){
lisArr[0].innerHTML=Math.floor(hour/10);
lisArr[1].innerHTML=hour%10;
lisArr[3].innerHTML=Math.floor(minute/10);
lisArr[4].innerHTML=minute%10;
lisArr[6].innerHTML=Math.floor(second/10);
lisArr[7].innerHTML=second%10;
}
},1000);
}
function banner(){
//获取元素 banner_img（装了十张图片）banner_index li(每一个index的li) 选一个元素时用all还是能选到，但选多个元素时不用all，一个都选不上
var imgs = document.querySelector(".banner_img");
var indexArr = document.querySelectorAll(".banner_index li");
//获取屏幕宽度
var width = document.body.offsetWidth;
//把ul往左边移，因为第一张图片其实是最后一张 transform: translateX(-10%); 所以索引值从1开始不是从0
var index = 1;
//开启定时器
var timeId = setInterval(function(){
//当index不超过9时，让它一直增加，判断放在下面的过渡结束事件中
index++;
imgs.style.transform="translateX("+index*width*(-1)+"px)";
imgs.style.transition="all .3s";
},1000);
//给加了过渡效果的元素绑定过渡结束事件。定时器用来让ul移动，过渡结束事件用来让li变化
imgs.addEventListener("webkitTransitionEnd",function(){
//把判断加在这里，因为一共只有8个li
if(index>8){
//跳到1是因为索引为0的图片不是真正的第一张，但是li的索引还是0，所以后面会index-1
index=1;
// 因为这里index只有8，后面最后一张图片还没有到就被弄回之前的，会出现很大跳动，这时应该把transition去掉，
// 这也是为什么定时器中才开transtion,其实应该在定时器外面开transtion，可以避免一些资源浪费
imgs.style.transition="";
//过渡关掉以后，还要让ul迅速跳到第一张图片
imgs.style.transform = 'translateX('+index*width*-1+'px)';
}
for(var i=0;i<indexArr.length;i++){
//先把所有的current类清掉
indexArr[i].className="fl";
}
indexArr[index-1].className="fl current";
})
}
虽然今天的代码少，但是写了超级久，主要是因为一点小错误检查半天查不出来。
2.引入js文件，在引入css文件link下面script引入js文件 http://emmet.evget.com/ 查找emmet快捷键的网页 script:src
3.scroll有兼容性问题，必须<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="en">才可以使用（真的醉，查错N久）
4.选择多个元素要用querySelectorAll（今天一直犯这种错误。。）
window.onload=function(){
headScroll();
cutDownTime();
banner();
}
function headScroll(){
//获取元素 header(透明度要改变的元素),nav（透明度的改变程度是屏幕卷到nav最底下时完全变为1）
var header = document.querySelector(".header");
var nav = document.querySelector(".nav");
//offsetTop是nav距顶部的距离，offsetHeight是nav本身的高度
var height = nav.offsetTop+nav.offsetHeight;
// 绑定屏幕滚动事件
window.onscroll=function(){
//获取屏幕卷起的高度
var scrollHeight = window.document.body.scrollTop;
// 计算百分数，因为透明度是一点点变化的
var percent = scrollHeight/height;
if(percent>1){
percent=1;
}
//用rgba来设置透明度，因为如果用opacity设置，会影响子盒子的透明度
header.style.backgroundColor="rgba(201,21,35,"+percent+")";
}
}
function cutDownTime(){
//获取元素 .main:nth-child(1) .main_top ul li
var lisArr = document.querySelectorAll(".main:nth-child(1) .main_top li");
//定义总的时间
var totalHour = 3;
var totalSecond = totalHour*60*60;
//开启定时器
var timeId = setInterval(function(){
//判断总时间如果小于等于0 ，就清空定时器，并跳出定时器
if(totalSecond<=0){
clearInterval(timeId);
return;
}
totalSecond--;
var hour = Math.floor(totalSecond/3600);
var minute = Math.floor(totalSecond%3600/60);
var second = totalSecond%60;
for(var i=0;i<lisArr.length;i++){
lisArr[0].innerHTML=Math.floor(hour/10);
lisArr[1].innerHTML=hour%10;
lisArr[3].innerHTML=Math.floor(minute/10);
lisArr[4].innerHTML=minute%10;
lisArr[6].innerHTML=Math.floor(second/10);
lisArr[7].innerHTML=second%10;
}
},1000);
}
function banner(){
//获取元素 banner_img（装了十张图片）banner_index li(每一个index的li) 选一个元素时用all还是能选到，但选多个元素时不用all，一个都选不上
var imgs = document.querySelector(".banner_img");
var indexArr = document.querySelectorAll(".banner_index li");
//获取屏幕宽度
var width = document.body.offsetWidth;
//把ul往左边移，因为第一张图片其实是最后一张 transform: translateX(-10%); 所以索引值从1开始不是从0
var index = 1;
//开启定时器
var timeId = setInterval(function(){
//当index不超过9时，让它一直增加，判断放在下面的过渡结束事件中
index++;
imgs.style.transform="translateX("+index*width*(-1)+"px)";
imgs.style.transition="all .3s";
},1000);
//给加了过渡效果的元素绑定过渡结束事件。定时器用来让ul移动，过渡结束事件用来让li变化
imgs.addEventListener("webkitTransitionEnd",function(){
//把判断加在这里，因为一共只有8个li
if(index>8){
//跳到1是因为索引为0的图片不是真正的第一张，但是li的索引还是0，所以后面会index-1
index=1;
// 因为这里index只有8，后面最后一张图片还没有到就被弄回之前的，会出现很大跳动，这时应该把transition去掉，
// 这也是为什么定时器中才开transtion,其实应该在定时器外面开transtion，可以避免一些资源浪费
imgs.style.transition="";
//过渡关掉以后，还要让ul迅速跳到第一张图片
imgs.style.transform = 'translateX('+index*width*-1+'px)';
}
for(var i=0;i<indexArr.length;i++){
//先把所有的current类清掉
indexArr[i].className="fl";
}
indexArr[index-1].className="fl current";
})
}
虽然今天的代码少，但是写了超级久，主要是因为一点小错误检查半天查不出来。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js轮播图自动播放和手动控制
- 自动播放，鼠标触发排序切换JS焦点轮播图（不带左右箭头切换）
- 前端案例分享：京东电梯式轮播
- 7、滑屏轮播——自动播放加无缝循环
- js仿京东轮播图效果
- 仿京东，淘宝，顶部自动轮播图
- Js实现京东大的轮播图及相关动画效果
- JS自动倒计时30秒后按钮才可用(两种场景)
- 移动端音频自动播放的方法(js)
- js 自动播放的实例代码
- ConvenientBanner 实现广告轮播，自动播放。（进阶篇）
- 基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView
- JS实现自动倒计时30秒后按钮才可用
- 写一个图片轮播效果的Demo(自动播放)附代码
- JS自动倒计时30秒后按钮才可用(两种场景)
- js手动播放图片实现图片轮播效果
- JS特效实现图片自动播放并可控的效果
- 使用bootstrap之轮播插件不自动播放的问题和播放时间间隔的问题解决方法
- 解决video.js 在 IOS播放的时候自动全屏的问题
- 可自动播放、拖动的js图片展示效果（三）