您的位置:首页 > Web前端 > HTML5

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

2019-04-29 09:07 260 查看
  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://www.geek-share.com/detail/2701938269.html

  1. 轮播图的实现(手动和自动两种,下图为可自动播放)

<script>
  //轮播图,鼠标放在小方块上,图片向左移动
  window.onload=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].onmouseover=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(“动画执行完毕”);

});

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐