第九周自学前端H5中遇到的问题，如Github如何使用，简单轮播图的实现？

1. Github的使用：

Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

①git连接github 的命令：

    $ git config --global user.name "你的github用户名"//配置用户名
    $ git config --global user.email "你的github邮箱"//配置邮箱
    $ ssh-keygen -t rsa -C "你的github邮箱"//生成密钥
    $ ssh git@github.com//连接github

②vscode和github之间传文件该如何传？把vscode中的文件传到远程的git仓库,从仓库更新代码等？

（转载他人代码）

https://blog.csdn.net/q3585914/article/details/68924116

1. 轮播图的实现（手动和自动两种，下图为可自动播放）

<script>
	//轮播图，鼠标放在小方块上，图片向左移动
	window.οnlοad=function(){
	var inner=document.getElementById("inner");
	var imgWidth=inner.offsetWidth;
	var ul=inner.children[0];
	var spanArr=inner.children[1].children;
	for(var i=0;i<spanArr.length;i++){
	//属性绑定，自定义属性存储盒子的索引值
	//用span的innerHTML属性也可以，为了代码的健壮性，使用自己的属性值
	spanArr[i].index=i;
	spanArr[i].οnmοuseοver=function(){
	for(var j=0;j<spanArr.length;j++){
	spanArr[j].className="";
	}
	this.className="current";
	animate(ul,-this.index*imgWidth);
	}
	}
	//添加定时器,左右切换图片，需要两个值
	setInterval(autoPlay,1000);
	//固定向右切换图片，需要两个定时器，一个记录图片，一个记录小方块
	var key=0;
	var square=0;
	function autoPlay() {
	//通过控制key的自增，来模拟图片的索引值，然后移动ul
	key++;
	if(key>spanArr.length-1){
	//图片已经滑动到最后一张，接下来跳转到第一张，之后滑动到第二张
	key=0;
	}
	animate(ul,-key*imgWidth);
	//控制小方块，排他思想
	square++;
	if(square>spanArr.length-1){//索引值不能大于等于5，如果等于5，变为0
	square=0;
	}
	for(var i=0;i<spanArr.length;i++){
	spanArr[i].className="";
	}
	spanArr[square].className="current";
	}
	function animate(ele,target){
	clearInterval(ele.timer);
	var speed=target>ele.offsetLeft?10:-10;
	ele.timer=setInterval(function (){
	var val=target-ele.offsetLeft+speed+"px";
	ele.style.left=target+"px";
	clearInterval(ele.timer);
	},10)
	}
	}
	</script>

1. Jquery操作DOM，有三种入口函数

① 文档加载完毕，图片不加载的时候就会执行这个函数。

如 $(function (){

           $(".box").click({

              });

          $("#box").mouseenter({

            });

           $("div").mouseover({

            });

      });

② 文档加载完毕，图片不加载的时候就会执行这个函数。

$(document).ready(function({

        });

③文档加载完毕，图片加载完毕的时候在执行这个函数。

$(window).ready(function({

        });

1. 子代选择器和后代选择器

（一） Jquery层级选择器：子代选择器(>）：选择指定元素的直接子元素，如$(“#divItem>p”)，会选择出if为divItem这个元素下面的直接子元素。

（二） 后代选择器(空格)：选择指定元素的后代元素。如$(“#divItem p”),会选择id为divItem这个元素下面所有的元素p。

（三）基本过滤选择器

① eq(index)   index是从0开始的第一个数字，选择序号为index的元素。选择第一个匹配的元素。如$(“li:eq(1)”).css(“background”,”red”);

② :gt(index)   index是从0开始的第一个数字，选择序号大于index的元素。$(“li:gt(2)”).css(“parcity”,1);

③：It(index)   index是从0开始的一个数字，选择小于index的元素。

④：odd   选择所有序号为奇数行的元素

:even  选择所有序号为偶数的元素

⑥：first   选择匹配的第一个元素

⑦：last   选择匹配的最后一个元素

（四）属性选择器

$(“a[href]”)   选择所有包含href的元素

$(“a[href=’itcast’]”)   选择href属性为itcast的a标签。

！=（不等于）、^=’web’(选择所有以web开头的元素)、$=’cn’（选择以cn结尾的元素）

（五）筛选选择器

5. 切换

toggleClass(切换) 相当于removeClass+addClass(简单实现显示或隐藏，改变颜色等功能)。

jquery动画

不支持背景色变化animate({“background-color”:”red”},1000,function () {

                                                    alert(“动画执行完毕”);

});