基于H5和JS的仿京东商城类首页
技术：html5，javascript,css
概述
纯原生JS的仿京东首页的首页，高比率还原京东首页各类动态效果和样式，有需要的童鞋可以参考借鉴，或者直接拿来用，哈哈可以省很多功夫哦，嘻嘻。
详细
一、实际效果
二、目录结构
说明：
images 文件夹用来存放页面所需图片
jd.css 网页所需样式
jd.js 网页动态效果所需js
jingdong.html 首页所需html结构
jquery-1.8.3.min.js 网页动态效果可选实现方式，js文件中已注释
reset.css 网页样式初始化设置
三、详细步骤
引用项目所需样式表和JS文件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="jd.css"> </head> <body> //主体内容 <script src="jquery-1.8.3.min.js"></script> <script src="jd.js"></script> </body> </html>
下述JS只是网页部分效果的实现，均为原生JS所写，其中涉及一些DOM操作，没有使用jquery，有需要的可以使用$('[dom节点]')替代。
window.onload=function(){
var aCon=document.getElementById('con');
var aLis=aCon.getElementsByTagName('li');
var aNav=document.getElementById('nav');
var aLis2=aNav.getElementsByTagName('li');
var aLeft=document.getElementById('left');
var aRight=document.getElementById('right');
var num=0;
var timer1=timer2=null;
function auto(){
num++;
if (num>=aLis.length) {
num=0;
};
move();
}
timer1=setInterval(auto,3000);
//计时器要写在外层，能够彻底清除
function move(){
clearInterval(timer2);
for (var i = 0; i < aLis.length; i++) {
aLis[i].style.opacity=0;
aLis2[i].style.background='#3E3E3E';
};//每次都把样式清零
aLis2[num].style.background='#B61B1F';
var op=0;
timer2=setInterval(function(){
op+=0.02;
if (op>=1) {
op=1;
clearInterval(timer2);
};
aLis[num].style.opacity=op;
},25)
}
for (var i=0; i<aLis2.length; i++){
aLis2[i].id=i;
//保存当前下标
aLis2[i].onmouseenter=function (){
clearInterval(timer1);
num=this.id;/*同步下标*/
move();
}
aLis2[i].onmouseout=function (){
timer1=setInterval(auto,3000);
}
}
aLeft.onclick=function () {
clearInterval(timer1);
clearInterval(timer2);
num--;
if (num<0) {
num=aLis.length-1;
};
move();
timer1=setInterval(auto,3000);
}
aRight.onclick=function () {
clearInterval(timer1);
clearInterval(timer2);
num++;
if (num>=aLis.length){
num=0;
};
move();
timer1=setInterval(auto,3000);
}
//底部自动滚动
var f13c2_div3=byclass('f13c2_div3')[0];
var timer151=timer152=null;
var s=0;
var sctop=0;
f13c2_div3.scrollTop=690;
timer151=setInterval(function(){
s++;
if (s>6) {
f13c2_div3.scrollTop=690;
s=1;
sctop=0;
};
clearInterval(timer152);
timer152=setInterval(function(){
sctop++;
if (sctop>=115*s) {
clearInterval(timer152);
};
f13c2_div3.scrollTop=690-sctop;
},1)
},4000)
}四、细节说明
本项目初衷只是用来练习Html和原生dom操作以及各类动态效果的实现。
html有将近1万多行，占了90%均为重复代码，大家可以根据所选MVVM框架进行遍历，取主体框架即可。
JS有将近1000行代码，其中包括轮播图，左右滚动，返回顶部，tab切换，嵌套切换等所有实际项目所需的效果，许多dom操作，用jquery替代的话能省略不少代码，大家可以用来借鉴。
本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢
手机上随时阅读、收藏该文章 ？请扫下方二维码
