web前端学习笔记

大家好，我是链表哥，新的学期，新的学习，我会为您展示我的学习进程。

一：什么是WEB前端？

所谓的Web前端指的是用户所能接触到的，并服务于用户的前沿端口，经我们程序员编辑修饰后展示给大众，如各个网页，淘宝是网站页面等。

二：学习门路：

我的自学是黑马程序员pink老师发布的视频，可在b站搜索到。、、
用的软件是HBulider,大家可根据老师或者习惯来下载web前端编辑工具、、、

三： HBulider的常用快捷键

1.激活代码助手 Alt + /
2.开启关闭注释整行 Ctrl + /
3.开启关闭注释已选内容 Ctrl + Shift + /
4.删除此行Ctrl+D
5.向左选中 Ctrl + Shift + 向左
6.向右选中 Ctrl + Shift + 向右
7.运行Ctrl+R

四：字体图标

字体图标相等对于难以放大缩小的图片来说有很多的优势，而且易于移动端响应，同时http请求相对于图片也更小，下面就让我们学习一下如何运用图标。

4-1：图标的下载

 http://icomoon.io

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，网速较慢的原因是国外网站。

4.2 首先把 fonts文件夹放入我们根目录下

4.3 点开文件中的链接，复制图标右侧的正方形

4.4在样式（style）里申明字体

@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

4.5 给盒子使用字体

span {
font-family: “icomoon”;
}

更新icon图标

如果图标不够用了，可将我们压缩包里面的selection.json 重新上传到icomoon网站，下载新的压缩包，重新替换原来的包即可。

9月14日

今日目标：完整的快捷键引用。
绝对位置和相对位置的补充
表格的应用。

10月23日

到今天为止，我的前端项目已经基本完成了，运用了html,css,js等语言。
版面设计，可分为index目录页，列表页、详情页和注册页等。

附上index首页的html、js代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /><link rel="stylesheet"  href="css/base.css"/><link rel="stylesheet"  href="css/common.css"/><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> <link rel="stylesheet" href="css/index.css" /><!--引入 首页的css文件--><script src="js/animate.js"></script><!--animate.js必须写到index.js上面--><script src="js/index.js"></script></head><body><!--顶部快捷导航启动--><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎你！</li><li> <a href="#">请登录</a> <a href="#" class="style-red"> 免费注册 </a>     </li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li class=spacer></li><li><a href="#">我的品优购</a><i class="icomoon"></i></li><li class=spacer></li><li><a href="#">品优购会员</a></li><li class=spacer></li><li><a href="#">企业采购</a></li><li class=spacer></li><li><a href="#">关注品优购</a> <i class="icomoon"></i> </li><li class=spacer></li><li><a href="#">客户服务</a> <i class="icomoon"></i> </li><li class=spacer></li><li><a href="#">网站导航</a> <i class="icomoon"></i> </li></ul></div></div></div><!--顶部快捷导航结束--><!--header制作--><div class="header w"> <div class="logo"> <h1><a herf="index.html" title="品优购">品优购</a></h1> <!--h1很重要，搜索引擎就靠这个找，所以要添加文字--></div><!--搜索--><div class="search"><input type="text" class="text" value="请搜索.." ><button class=btn>搜索</button></div><!--热词--><div class="hotwords"><a herf="#" class="style-red">优惠购首发</a><a herf="#">亿元优惠</a><a herf="#">9.9元团购</a><a herf="#">每满99减30</a><a herf="#">成人用品</a><a herf="#">电脑    </a><a herf="#">通信  </a></div><!--我的购物车--><div class="shopcar"><i class="car"></i>  我的购物车  <i class="arrow"></i><i class="count">8</i></div><!--每个图片都得新建一个class--></div><!--header结束--><!--顶部导航nav-->  <!-- 此处需要一个操作：取消隐藏--><div class="nav">     <div class="w"><div class="dropdown fl" ><div class="dt">全部商品分类</div><div class="dd" >       <!--此处要取消隐藏--><ul><li class="menu_item " > <a href="#">家用电器</a><i></i></li><li class="menu_item "> <a href="list.html">手机</a>  、   <a href="#">数码</a>  、   <i></i></li><li class="menu_item "> <a href="#">图书、音像、数字商品</a> <i></i></li><li class="menu_item "> <a href="#">家居、家具、家装、厨具</a> <i></i></li><li class="menu_item "> <a href="#">服饰内衣、个护化妆</a> <i></i></li><li class="menu_item "> <a href="#">运动健康、汽车用品</a> <i></i></li><li class="menu_item "> <a href="#">彩票、旅行</a> <i></i></li><li class="menu_item "> <a href="#">理财、众筹</a> <i></i></li><li class="menu_item "> <a href="#">箱包、珠宝、奢侈品、鞋靴</a> <i></i></li><li class="menu_item "> <a href="#">运动户外、钟表</a> <i></i></li><li class="menu_item "> <a href="#">母婴、玩具</a> <i></i></li></ul></div></div><!--右侧当好模式--><div class="navitems fl" ><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul></div></div></div><!--顶部导航nav结束--><div class="w"><div class="main"><div class="focus fl"><a href="javascript:;" class="arrow-l"> < </a><a href="javascript:;" class="arrow-r">  </a><!--滚动区--><ul><li><a href="#"><img src="upload/focus.png" alt="" ></a></li><li><a href="#"><img src="upload/banner1.jpg" alt="" ></a></li><li><a href="#"><img src="upload/banner2.jpg" alt="" ></a></li><li><a href="#"><img src="upload/banner3.jpg" alt="" ></a></li></ul><ol class="circle"></ol></div><div class="newflash fr"><div class="news"><div class="news-hd">评优购快报<a href="#"> 更多&gt;</a></div><div class="news-bd"><ul><li><a href="#">【特惠】科普卢星区本地特产</a></li><li><a href="#">【兵营】枪兵装甲新升级！！！</a></li><li><a href="#">【重工厂】坦克制造新工艺</a></li><li><a href="#">【星港】维京战机与女妖一起购买打五折！</a></li><li><a href="#">【补给】补给站从天而降！</a></li></ul></div></div><div class="lifeservise"><ul><li><a href="#"><i class="servise_ico servise_ico_huafei"></i>   <p>话费</p></a></li><li><a href="#"><i class="servise_ico servise_ico_feiji"></i>   <p>飞机</p></a><span class="hot"> </span></li><li><a href="#"><i class="servise_ico servise_ico_dianyingpiao"></i>   <p>电影票</p></a></li><li><a href="#"><i class="servise_ico servise_ico_youxi"></i>   <p>游戏</p></a></li><li><a href="#"><i class="servise_ico servise_ico_caipiao"></i>   <p>彩票</p></a></li><li><a href="#"><i class="servise_ico servise_ico_jiayouzhan"></i>   <p>加油站</p></a></li><li><a href="#"><i class="servise_ico servise_ico_jiudian"></i>   <p>酒店</p></a></li><li><a href="#"><i class="servise_ico servise_ico_huochepiao"></i>   <p>火车票</p></a></li><li><a href="#"><i class="servise_ico servise_ico_zhongchou"></i>   <p>众筹</p></a></li><li><a href="#"><i class="servise_ico servise_ico_licai"></i>   <p>理财</p></a></li><li><a href="#"><i class="servise_ico servise_ico_lipingka"></i>   <p>礼品卡</p></a></li><li><a href="#"><i class="servise_ico servise_ico_baitiao"></i>   <p>白条</p></a></li></ul></div><div class="bargain"><img src="upload/bargin.jpg" alt="" /></div></div></div></div><!--推荐服务模块--><div class="recommend w"><div class="recom-hd fl"><img src="img/clock.png" alt="" /><h3>今日推荐</h3></div><div class="recom-bd fl"><ul><li><a href="#"></a><img src="upload/1.jpg" alt="" /></li><li><a href="#"></a><img src="upload/2.jpg" alt="" /></li><li><a href="#"></a><img src="upload/3.jpg" alt="" /></li><li class="last"><a href="#"></a><img src="upload/4.jpg" alt="" /></li></ul></div></div><!--推荐服务模块结束--><!--楼层区 开始--><div><div class="jiadian w"><div class="box-hd"><h3>家用电器</h3><div class="tab-list "><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">高端电器</a>|</li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li ><a href="#">节能补贴</a></li><li ><a href="#">4K电视</a></li><li ><a href="#">空气净化箱</a></li><li ><a href="#">电饭煲</a></li><li ><a href="#">滚筒洗衣机</a></li><li ><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt="" /></li><li class="w329"><img src="upload/floor-1-b02.png" alt="" /></li><li class="w219"><div class="tab-con-item"> <a href="#"><img src="upload/floor-1-2.png" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt="" /></a></div></li><li class="w220">   <div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt="" /></a></div></li><li class="w220">   <div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt="" /></a></div></li></ul></div></div><div class="jiadian w"><div class="box-hd"><h3>手机通讯</h3><div class="tab-list "><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">高端电器</a>|</li></ul></div></div><div class="box-bd"><ul class="tab-con"> <li class="w209"><ul class="tab-con-list"><li ><a href="#">手机通讯</a></li><li ><a href="#">双卡双待</a></li><li ><a href="#">护国者华为</a></li><li ><a href="#">刘海屏</a></li><li ><a href="#">水滴屏</a></li><li ><a href="#">光头</a></li></ul><img src="upload/211.jpg" alt="" /></li><li class="w329"><img src="upload/212.jpg" alt="" /></li><li class="w219"><div class="tab-con-item"> <a href="#"><img src="upload/213.jpg" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/214.jpg" alt="" /></a></div></li><li class="w220">  <div class="tab-con-item"><a href="#"><img src="upload/215.jpg" alt="" /></a></div></li><li class="w220"> <div class="tab-con-item"><a href="#"><img src="upload/216.jpg" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/217.jpg" alt="" /></a></div></li></ul></div></div><div class="jiadian w"><div class="box-hd"><h3>电脑办公</h3><div class="tab-list "><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">高端电器</a>|</li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li ><a href="#">SSD硬盘</a></li><li ><a href="#">显示器</a></li><li ><a href="#">台式机</a></li><li ><a href="#">组装电脑</a></li><li ><a href="#">电脑配件</a></li><li ><a href="#">奸商专区</a></li></ul><img src="upload/311.jpg" alt="" /></li><li class="w329"><img src="upload/312.jpg" alt="" /></li><li class="w219"><div class="tab-con-item"> <a href="#"><img src="upload/313.jpg" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/314.jpg" alt="" /></a></div></li><li class="w220"> <div class="tab-con-item"><a href="#"><img src="upload/315.jpg" alt="" /></a></div></li><li class="w220"> <div class="tab-con-item"><a href="#"><img src="upload/316.jpg" alt="" /></a></div><div class="tab-con-item"><a href="#"><img src="upload/317.jpg" alt="" /></a></div></li></ul></div></div></div><!--楼层区  结束--><!--固定电梯导航--><div class="fixedtool"><ul><li class="current">家用电器</li><li>手机通讯</li><li>电脑办公</li><li>家用家具</li><li>益虫</li><li>星灵</li></ul></div><!--固定电梯导航结束--><!--动画开始--><!--动画结束--><!--footer start--><div class="footer"><div class="w"><!--mod_servise--><div class="mod_servise"><ul><li><i class="mod-service-icon mod_servise_kuai"></i><div class="mod_servise_tit"><h5>正品保障</h5><p>正品保障，提供发票</p></div></li><li><i class="mod-service-icon mod_servise_zheng"></i><div class="mod_servise_tit"><h5>极速物流</h5><p>极速物流，极速送达</p></div></li><li><i class="mod-service-icon mod_servise_bao"></i><div class="mod_servise_tit"><h5>无忧售后</h5><p>七天无理由退货</p></div></li><li><i class="mod-service-icon mod_servise_ti"></i><div class="mod_servise_tit"><h5>特色服务</h5><p>私人定制家电套餐</p></div></li><li><i class="mod-service-icon mod_servise_gong"></i><div class="mod_servise_tit"><h5>家电中心</h5><p>您的购物指南</p></div></li></ul> <!--cs精灵技术--></div><!--mod_help--><div class="mod_help"><dl class="mod_help_item"><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">常见问题/团购</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl class="mod_help_item"><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务/团购</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl class="mod_help_item"><dt>配送方式</dt><dd><a href="#">上门自提</a></dd><dd><a href="#">985限时达</a></dd><dd><a href="#">配送服务查询</a></dd><dd><a href="#">配送费收取标准</a></dd><dd><a href="#">海外配送</a></dd></dl><dl class="mod_help_item"><dt>支付方式</dt><dd><a href="#">货到付款</a></dd><dd><a href="#">在线支付</a></dd><dd><a href="#">分期付款/团购</a></dd><dd><a href="#">邮局汇款</a></dd><dd><a href="#">公司转账</a></dd></dl><dl class="mod_help_item"><dt>售后服务</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">价格保护</a></dd><dd><a href="#">退款说明/团购</a></dd><dd><a href="#">返修/退换货</a></dd><dd><a href="#">取消订单</a></dd></dl><dl class="mod_help_item mod_help_app "><dt>帮助中心</dt><dd><img src="upload/wx_cz.jpg" alt="" /><p>评优购客户端</p></dd></dl></div><!--mod_copy_right--><div class="mod_copyright"><p class="mod_copyright_link">关于我们 | 联系我们 | 关于我们 | 商家入驻 | 营销中心 | 友情链接 | 关于我们 | 营销中心 | 友情链接 | 关于我们</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100<br />京ICP备08001421号京公网安备110108007702</p></div><!--mod_copy_right--></div></div> <!--footer end--><div id="divFly"style="position:absolute;">
<img src="favicon.ico" />
</div><script type="text/javascript">function DivFlying() {var div = document.getElementById("divFly");if (!div) {return;}var intX = window.event.clientX;var intY = window.event.clientY;div.style.left = intX + "px";div.style.top = intY + "px";
}
document.onmousemove = DivFlying;</script></body>
</html><!--下次看76个-->

css代码

/*此文件放首页的样式*/
.main {width: 980px;height: 455px;margin-left: 219px ;margin-top: 10px;
}
.focus {/*子绝对,父窗体相对;*/position: relative;width: 727px;height: 455px;overflow: hidden;
}
.focus ul{position: absolute;top: 0;left: 0;width: 600%;}
.focus ul li{float: left;
}
.newflash {width: 250px;height: 455px;/*background-color: skyblue; */  /*左边窗体*/
}
.arrow-l ,
.arrow-r {display: none;position: absolute;top: 50%;margin-top: -20px ;width: 24px;height: 40px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 40px;color: #fff;font-family: 'icomoon';font-size: 18px;z-index: 2; /*层级比图片高,显示小圆圈*/
}
.arrow-r {right: 0;  /*右侧透明图标靠右*/
}
.circle{position: absolute;bottom: 10px;left: 50px;
}
.circle li{float: left;width: 8px;height: 8px;/*background-color: #fff;*/border: 2px solid rgba(255, 255, 255, 0.5);margin: 0 3px;border-radius: 50% ;/*鼠标经过显示小手*/cursor: pointer;
}
/*小圆圈鼠标点击后变成白色*/
.current {background-color: #fff;box-shadow: ; /*?*/
}
/*接下来的是左边的div区域*/
.news {height: 163px;border: 1px solid #ccc;
/*  background-color: pink;*/
}
.lifeservise {overflow: hidden;  /*超出隐藏*/height: 208px;/*background-color: purple;*/border: 1px solid #ccc;border-top:none ; /*无上边距*/
}
.bargain {height: 75px;margin-top: 5px;
}
.news-hd {height: 32px;border-bottom: 1px dotted #ccc; /*dotted点线 dashed虚线*/padding: 0 15px;font-size: 14px;line-height: 34px;padding-left: 15px;
}
.news-hd  a {float: right;font-size: 12px;;
}
.news-bd {padding: 10px 0 0 15px;
}
.news-bd li {height: 23px;
}
.lifeservise ul {width: 252px;          /*子盒子可以比父盒子大,将ul设置大一点就能一行装4个图片了,然后超出部分隐藏*/
}
.lifeservise li {position: relative;float: left;width: 62px;height: 70px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.lifeservise li a {display: block;overflow: hidden; /*解决i引起的外边距合并问题*/height: 100%;
}
.servise_ico {display: block;width: 24px;height: 24px;background: url(../img/icons.png) no-repeat;margin: 10px auto;
}
.lifeservise li p {text-align: center;
}
.hot {position:  absolute;right: 0;top: 0;width: 12px;height: 15px; background: url(../img/jian.jpg) no-repeat;
}
.servise_ico_huafei {background-position: -17px -16px;
}
.servise_ico_feiji {background-position: -80px -18px;width: -26px;}
.servise_ico_dianyingpiao {background-position: -139px -18px;width: -26px;
}
.servise_ico_youxi {background-position: -205px -18px;width: -26px;
}
.servise_ico_caipiao {background-position: -17px -87px;width: -26px;
}
.servise_ico_jiayouzhan {background-position: -78px -86px;
}
.servise_ico_jiudian {background-position: -141px -86px;
}
.servise_ico_huochepiao {background-position: -203px -86px;
}
.servise_ico_zhongchou {background-position: -17px -156px;
}
.servise_ico_licai {background-position: -139px -16px;
}
.servise_ico_lipingka {background-position: -203px -16px;
}
.servise_ico_baitiao {background-position: -17px -16px;
}
/*推荐模块*/
.recommend {height: 163px;margin-top: 10px;
}
.recom-hd {width: 200px;height: 163px;background-color: #5c5251;text-align: center;
}
.recom-hd img {margin:30px 0 10px 0 ;
}
.recom-hd h3 {font-size:18px ;color:#fff ;font-weight: normal;
}
.recom-bd {width: 1000px;height: 163px;background-color: #ebebeb;
}
.recom-bd li {float: left;width: 249px;height: 145px;border-right: 1px solid #ccc;margin-top: 10px;}
.recom-bd last {/*提权,last放入recom-bd中去*/border-right: 0;
}
.box-hd {height: 30px;border-bottom: 2px solid #C81623;margin-top: 25px;
}
.box-hd h3 {float: left;font-size: 18px;color:  #c81623;
}
.tab-list {float: right;line-height: 30px;}
.tab-list li{float: left;
}
.tab-list li a {margin: 0 10px;
}
.box-bd {height: 360px;}
.tab-con li {height: 361px;
}
.w209 {width: 209px;background-color: #f9f9f9;
}
.w329 {width: 329px;
}
.w219 {width: 219px;border-right: 1px solid #ccc;
}
.w220 {width: 220px;border-right: 1px solid #ccc;
}
.tab-con li {float: left;height: 360px;
}
.tab-con-item {border-bottom: 1px solid #ccc;
}
.tab-con-list li {width: 86px;height: 32px;line-height: 32px;border-bottom: 1px solid #ccc;margin-left: 10px;text-align: center;
}
.tab-con-list {overflow: hidden;margin-bottom: 15px;
}
.box-bd li {overflow: hidden;
}
.box-bd img {/*过度写到本身上*/transition: all 0.2s;
} /*鼠标经过图片往右走*/
.box-bd img:hover {margin-left: 8px;
}
/*电梯导航*/
.fixedtool {position: fixed;width: 66px;background-color: #fff;top:100px;left: 50% ;margin-left: -666px; /*先中间的一半再版心的一半再加上自己宽度的一半*/}
.fixedtool li {height: 32px;line-height: 32px; /*行高*/text-align: center;font-size: 12px;border-bottom: 1px solid #ccc;cursor:pointer; /*鼠标变成小手*/
}
.fixedtool .current {background-color: #c81623;color: #fff;
}@keyframes move{0% {top: 100%;bottom: 0%;}100% {top: 10%;bottom: 100%;}
}
.move {width: 60px;height: 60px;background-color: pink;animation-name: move;animation-duration: 5s;
}
.ani {position:fixed;width: 1000px;height: 1000px;top: 0;
}

js，比较难的轮播图

window.addEventListener('load',function() {/*获取左右按钮*/var arrow_l = document.querySelector('.arrow-l');var arrow_r = document.querySelector('.arrow-r');var focus = document.querySelector('.focus');var focusWidth = focus.offsetWidth;/*鼠标经过显示隐藏的左右按钮*/focus.addEventListener('mouseenter',function(){arrow_l.style.display = 'block';arrow_r.style.display = 'block';clearInterval(timer);timer = null;})/*鼠标离开隐藏左右按钮*/focus.addEventListener('mouseleave',function(){arrow_l.style.display = 'none';arrow_r.style.display = 'none';timer = setInterval(function(){arrow_r.click();},1300);})/*自动生成圆点*/var ul = focus.querySelector('ul');var ol = focus.querySelector('.circle');for(var i=0;i<ul.children.length;i++) {var li = document.createElement('li');li.setAttribute('index',i);ol.appendChild(li);li.addEventListener('click',function() {for(var i = 0;i<ol.children.length;i++) {ol.children[i].className = '';}this.className = 'current';var index =this.getAttribute('index');var focusWidth = focus.offsetWidth;num = index;circle = index;console.log(focusWidth);console.log(index);animate(ul,-index*focusWidth);})}/*第一个圆圈current*/ol.children[0].className = 'current';/*克隆第一张图并放在最后*/var first = ul.children[0].cloneNode(true);ul.appendChild(first);/*点击右侧按钮切换*/var num = 0;var circle=0;arrow_r.addEventListener('click',function() {/*走到最后再从新开始*/if(num == ul.children.length-1) {ul.style.left = 0;num = 0;}num++;animate(ul,-num*focusWidth);circle++;if(circle == ol.children.length) {circle=0;}for(var i = 0;i< ol.children.length;i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';});arrow_l.addEventListener('click',function() {/*走到最后再从新开始*/if(num == 0) {num = ul.children.length-1;ul.style.left = -num * focusWidth+ 'px';}num--;animate(ul,-num*focusWidth);circle--;if(circle < 0 ) {circle=ol.children.length - 1;}circleChange();for(var i = 0;i< ol.children.length;i++) {ol.children[i].className = '';}ol.children[circle].className = 'current';});/*自动播放*/var timer = setInterval(function(){arrow_r.click();/*手动调用点击事件*/},1300);
})

anime动画（JS）

function animate(obj,target,callback) {clearInterval(obj.timer);obj.timer= setInterval(function(){var step = (target - obj.offsetLeft)/10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target){clearInterval(obj.timer);if(callback) {callback();}}obj.style.left = obj.offsetLeft + step +'px';},15);
}

== 持续更新中ing… ==