使用原生js开发的网站

首页 

首页部分源码

轮播图源码

  //轮播图js//获取标签var slider = document.getElementById('slider');var slider_main = document.getElementById('slider_main');var allBoxs = slider_main.children;var next = document.getElementById('next');var prev = document.getElementById('prev');var slider_index = document.getElementById('slider_index');var iNow = 0; //当前可视元素的索引var timer = null;//动态创建索引器for (var i = 0; i < allBoxs.length; i++) {//创建span标签当作索引器var span = document.createElement('span');//给索引器动态赋值类名if (i === 0) {//给索引器的第一个索引动态赋值类名span.className = 'slider_index_icon current';} else {span.className = 'slider_index_icon';}//给索引器动态添加索引数span.index = i + 1;//把索引器添加到索引栏里slider_index.appendChild(span);}//3.让滚动的元素归位var scroll_w = parseInt(getStyle(slider, 'width'));console.log(scroll_w);for (var j = 1; j < allBoxs.length; j++) {allBoxs[j].style.left = scroll_w + 'px';}//监听下一张按钮的事件next.onclick = function() {/*** 1.让当前可视元素动画左移* 2.让下一张图片 快速的显示到右边* 3.让这个元素动画进入*/startAnimation(allBoxs[iNow], {"left": -scroll_w})//让iNow更新iNow++;if (iNow >= allBoxs.length) {iNow = 0;}allBoxs[iNow].style.left = scroll_w + 'px';startAnimation(allBoxs[iNow], {"left": 0})//改变索引changeIndex();}//监听上一张按钮的事件prev.onclick = function() {startAnimation(allBoxs[iNow], {"left": scroll_w})iNow--;if (iNow < 0) {iNow = allBoxs.length - 1;}allBoxs[iNow].style.left = -scroll_w + 'px';startAnimation(allBoxs[iNow], {"left": 0})//改变索引changeIndex();}//开启定时器 自动播放timer = setInterval(autoPlay, 2000);//自动播放封装代码function autoPlay() {startAnimation(allBoxs[iNow], {"left": -scroll_w})iNow++;if (iNow >= allBoxs.length) {iNow = 0;}allBoxs[iNow].style.left = scroll_w + 'px';startAnimation(allBoxs[iNow], {"left": 0})changeIndex();}//清除定时器slider.onmouseover = function() {clearTimeout(timer);}slider.onmouseout = function() {timer = setInterval(autoPlay, 2000);}var slider_index_icons = slider_index.children;//遍历索引器，添加鼠标按下去的监听事件for (var i = 0; i < slider_index_icons.length; i++) {slider_index_icons[i].onmousedown = function() {//获取当前点击索引var index = parseInt(this.index) - 1;//点击的索引与当前的iNow进行对比if (index > iNow) {//下一个操作startAnimation(allBoxs[iNow], {'left': -scroll_w})allBoxs[index].style.left = scroll_w + 'px';} else if (index < iNow) {//上一个操作startAnimation(allBoxs[iNow], {'left': scroll_w})allBoxs[index].style.left = -scroll_w + 'px';}iNow = index;startAnimation(allBoxs[iNow], {"left": 0})changeIndex();}}//控制当前的索引function changeIndex() {for (var i = 0; i < slider_index_icons.length; i++) {slider_index_icons[i].className = 'slider_index_icon';}slider_index_icons[iNow].className = 'slider_index_icon current';}

导航栏源码 

  
花乐鲜购欢迎您!
李bb
关注微信平台
订单查询
花言花语
烂漫贺卡
常见问题
关于我们
站点导航
花乐鲜购
搜索爱情鲜花开业花篮生日鲜花鲜花礼盒情人节绿植送父母送女朋友

 侧边栏部分

 //客服侧边栏监听//获取标签var kefuaside = document.getElementById('kefuaside');//获取广告盒子的偏移量var kefuaside_top = kefuaside.offsetTop;var return_top = document.getElementById("return_top");var sTop;//滚轮滑动条的监听事件window.onscroll = function() {//获取页面滚动的高度var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;//开启动画startAnimation(kefuaside, { "top": docScrollTop + kefuaside_top });}//侧边栏按钮//获取标签var gdbox = document.getElementById('gdbox');var gdallBoxs = gdbox.children;var gdaside = document.getElementById('gdaside');var gdlis = gdaside.children;var isClick = false; //默认没有被点击for (var j = 0; j < gdlis.length; j++) {gdlis[j].index = j; //给每一个li标签的索引赋值为j//为每一个li标签绑定点击事件gdlis[j].onclick = function() {isClick = true; //点击//点击后，清除每一个li标签原有的类名for (var k = 0; k < gdlis.length; k++) {gdlis[k].className = '';}//点击后，给每一个li标签附上新类名this.className = 'gdcurrent in';}}

注册和登录页面

 注册和登录页面部分源码

  
 
欢迎登陆花乐鲜购商城没有账号，免费去注册一个
手机号：
密码:
验证码:
自动登录
点击注册

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！