js jQ轮播图（三种）

article/2025/10/19 0:29:06

第一种:
用了css3进行3D效果轮播
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {padding: 0;margin: 0;}.view {width: 560px;height: 300px;margin: 100px auto;position: relative;}ul {width: 100%;height: 100%;list-style: none;/* transform: rotate3d(1,1,0,-30deg); *//*  transform-style使被转换的子元素保留其 3D 转换,当某个元素进行3D转换的时候，保留其3D属性 就是3D*/transform-style: preserve-3d;}ul>li {width: 100%;height: 25%;float: left;position: relative;transform-style: preserve-3d;/* 添加过渡效果 */transition: transform 0.3s;}/* 设置每一个切片图像的一小块内容 */ul>li>span {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}ul>li>span:nth-of-type(1) {background-image: url("images/q1.jpg");/* 想z轴正方向偏移，也就是往垂直于面向我们的平面移动 */transform: translateZ(280px);}ul>li>span:nth-of-type(2) {background-image: url("images/q2.jpg");/* 通过这样Y轴位移和X轴旋转，让第二张放置于正方体的上方 */transform: translateX(280px) rotateY(90deg);}ul>li>span:nth-of-type(3) {background-image: url("images/q3.jpg");/* Z轴平移到画面的后方，再通过180度的X轴旋转，让图片倒立，到时候翻转过来的时候，图片的显示正常的。 */transform: translateZ(-280px) rotateY(180deg);}ul>li>span:nth-of-type(4) {background-image: url("images/q4.jpg");/* Y轴平移到画面的下方，通过-90度的逆时针旋转，让面倒立而且图像与平面平行 */transform: translateX(-280px) rotateY(-90deg);}/* 设置每一个li元素的span所显示的图片位置 */ul>li:nth-child(2)>span {/* 让第二个span的水平位移为自身宽度的，可以显示出下一个区域 */background-position: 0 -100%;}ul>li:nth-child(3)>span {background-position: 0 -200%;}ul>li:nth-child(4)>span {background-position: 0 -300%;}.pre,.next {width: 60px;height: 60px;text-align: center;line-height: 60px;position: absolute;top: 50%;text-decoration: none;font-size: 40px;transform: translate(0, -50%);background-color: rgba(0, 0, 0, 0.5);color: #fff;}.pre {left: 0;}.next {right: 0;}/*  */</style>
</head><body><div class="view"><ul><!-- 每一个li就是一个结构块 --><li><!-- 每一个span是这个结构中的某一个面,span1是第一张图的第一个部分 spn2是第二张图的第一个部分--><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li></ul><a href="javascript:;" class="pre"  onclick=" on()">&lt;</a><a href="javascript:;" class="next" onclick=" next()">&gt;</a></div>
<script>// 创建图片的索引var index = 0;// 添加一个阀门，防止多次点击var flag = true;//下一张图片function next() {if(flag){flag = false;index--;//获取所有li对象var li = document.getElementsByTagName("li");// 通过循环迭代所有li对象，添加新的样式内容for(var i = 0;i<li.length;i++){console.log(li)//4*4lili[i].style.transform = "rotateY("+(index*90)+"deg)";li[i].style.transitionDelay = (i*0.2)+"s";}// 计时器，通过这个延迟1秒后让阀门变回true transition-delaysetTimeout(function(){flag = true;},1000);}}function on(){if(flag){flag = false;index++;//获取所有li对象var li = document.getElementsByTagName("li");// 通过循环迭代所有li对象，添加新的样式内容for(var i = 0;i<li.length;i++){console.log(li)li[i].style.transform = "rotateY("+(index*90)+"deg)";li[i].style.transitionDelay = (i*0.2)+"s";}// 计时器，通过这个延迟1秒后让阀门变回truesetTimeout(function(){flag = true;},1000);}}
</script></body></html>

纯js轮播图
在这里插入图片描述
style:

    * {margin: 0;padding: 0;}a {text-decoration: none;}.container {position: relative;width: 600px;height: 400px;margin: 100px auto 0 auto;box-shadow: 0 0 5px green;overflow: hidden;}.container .wrap {position: absolute;width: 3600px;height: 400px;z-index: 1;}.container .wrap img {float: left;width: 600px;height: 400px;}.container .buttons {position: absolute;right: 5px;bottom: 40px;width: 150px;height: 10px;z-index: 2;}.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background-color: green;text-align: center;color: white;cursor: pointer;}.container .buttons span.on {background-color: red;}.container .arrow {position: absolute;top: 35%;color: green;padding: 0px 14px;border-radius: 50%;font-size: 50px;z-index: 2;display: none;}.container .arrow_left {left: 10px;}.container .arrow_right {right: 10px;}.container:hover .arrow {display: block;}.container .arrow:hover {background-color: rgba(0, 0, 0, 0.2);}

body:

 <div class="container"><div class="wrap" style="left: -600px;"><img src="img/q4.jpg" alt=""><img src="img/q1.jpg" alt=""><img src="img/q2.jpg" alt=""><img src="img/q3.jpg" alt=""><img src="img/q4.jpg" alt=""><img src="img/q1.jpg" alt=""></div><div class="buttons"><span class="on">1</span><span>2</span><span>3</span><span>4</span></div><a href="javascript:;" class="arrow arrow_left">&lt;</a><a href="javascript:;" class="arrow arrow_right">&gt;</a></div>

script:

   <script>// 无缝隙原理： 当我们切换到最后一张的时候点击下一张时移动到第一张副本的同时利用js设置css样式迅速切换到真正的第一张//  这个过程是肉眼无法看到的来达到无缝的目的window.onload = function () {var swper = document.querySelector(".swper");var wrap = document.querySelector(".wrap");var prev = document.querySelector(".arrow-left");var next = document.querySelector(".arrow-right");var img = document.querySelector(".wrap img");var index = 0; // 记录当前小圆点下标var isanimate = true; //是否自动播放var disable = true; // 用来控制快速点击导致页面错乱imgW = img.clientWidth;//获取图片的宽度next.onclick = () => {if (disable) {disable = false; // 这里设置为false表示进入切换动画未完成时就不能点击next_pic();}}prev.onclick = () => {if (disable) {disable = false;prev_pic();}}// 下一张function next_pic() {index++;var newLeft = parseInt(wrap.style.left) - imgW;// console.log(parseInt(wrap.style.left))if (parseInt(wrap.style.left) === -(5*imgW)) {wrap.style.left = -imgW + 'px';newLeft = -(2*imgW)}// wrap.style.left = newLeft + 'px';function change() {let timer;timer = setTimeout(() => {wrap.style.left = (wrap.offsetLeft - 20) + 'px'if (parseInt(wrap.style.left) != newLeft) {change()} else {clearTimeout(this.timer)disable = true;}}, 8);}change()showDots(); //小圆点}// 上一张function prev_pic() {index--;var newRight = parseInt(wrap.style.left) + imgW;// console.log(parseInt(wrap.style.left))if (parseInt(wrap.style.left) === 0) {wrap.style.left = -(4*imgW) + 'px';newRight = -(3*imgW)}function change() {let timer;timer = setTimeout(() => {wrap.style.left = (wrap.offsetLeft + 20) + 'px'if (parseInt(wrap.style.left) != newRight) {change()} else {clearTimeout(this.timer)disable = true;}}, 8);}change()showDots();}// 自动轮播var ti = null;function settime() {ti = setInterval(() => {next_pic()}, 2000);}settime();swper.onmouseenter = ()=>{clearInterval(ti)}swper.onmouseleave = () => {settime()}// 小圆点响应var index = 0;var dots = document.getElementsByTagName("span");function showDots() {if (index > 3) {index = 0;} else if (index < 0) {index = 3;}for (var i = 0; i < dots.length; i++) {dots[i].className = " "}dots[index].className = "active"}// 点击小圆点，就使wrap的Leftfor (let i = 0; i < dots.length; i++) {// console.log(dots[i])dots[i].onclick = function () {wrap.style.left = -imgW + (-imgW * i) + 'px';index = i;showDots();}}}
</script>

纯jQ轮播图:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮播图</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.slide {width: 640px;height: 400px;margin: 100px auto 0 auto;border: 5px solid #CCC;position: relative;overflow: hidden;}/* 导航点 */.slide .slide-nav {position: absolute;z-index: 2;bottom: 10px;right: 10px;}.slide .slide-nav>li {width: 10px;height: 10px;border: 2px solid #CCC;border-radius: 50%;float: left;margin-left: 5px;cursor: pointer;}.slide .slide-nav>li.active {background-color: #FFF;border-color: #FFF;}/* #导航点 *//* 轮播内容 */.slide .slide-content {position: relative;z-index: 1;top: 0;width: 99999px;height: 400px;}.slide .slide-content .slide-item {float: left;width: 640px;height: 400px;}.slide .slide-content .slide-item>img {width: 100%;height: 100%;}/* #轮播内容 *//* 按钮 */.slide .slide-btn {display: block;width: 50px;height: 100px;position: absolute;z-index: 2;}.slide .prev {top: 0;bottom: 0;left: 0;margin: auto;background: url(../img/pre.png) no-repeat center center;}.slide .next {top: 0;bottom: 0;right: 0;margin: auto;background: url(../img/next.png) no-repeat center center;}.slide a:hover {background-color: rgba(0, 0, 0, 0.5);}/* #按钮 */</style>
</head><body><div class="slide"><!-- 导航点 --><ul class="slide-nav"><li class="active"></li><li></li><li></li><li></li><li></li></ul><!-- 导航点 --><!-- 轮播图 --><div class="slide-content"><div class="slide-item"><img src="img/q1.jpg" alt="图片一"></div><div class="slide-item"><img src="img/q2.jpg" alt="图片二"></div><div class="slide-item"><img src="img/q3.jpg" alt="图片三"></div><div class="slide-item"><img src="img/q4.jpg" alt="图片四"></div><div class="slide-item"><img src="img/q1.jpg" alt="图片五"></div></div><!-- /轮播图 --><!-- 按钮 --><a href="javascript:void(0);" class="slide-btn prev"></a><a href="javascript:void(0);" class="slide-btn next"></a><!-- /按钮 --></div><script type="text/javascript" src="jQuery1.7.js"></script><script type="text/javascript">$(function () {$('.slide').slide();});$.fn.slide = function () {var slideEle = $(this);var slideContent = slideEle.find('.slide-content');var slideNavLi = slideEle.find('.slide-nav li');var slideWidth = slideEle.width(); //显示窗口宽度var timer = null; //定时器var time = 2000; //轮播图切换事件(毫秒)var index = 0; //当前索引值var oldLength = slideEle.find('.slide-item').length; //item初始长度var length = oldLength * 2; //item复制后的长度 init();//初始化function init() {//将item复制一份加入到原item的后面，形成:原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末,并定位到复1项index = oldLength;slideContent.append(slideContent.html()).css({width: slideWidth * length,left: -slideWidth * index});//鼠标悬浮事件slideEle.hover(function () { //移除定时任务clearInterval(timer);}, function () { //添加定时任务    setTimer();});//按钮点击事件slideEle.find('.prev').click(function () {if (!slideContent.is(':animated')) {index--;change();}}).end().find('.next').click(function () {if (!slideContent.is(':animated')) {index++;change();}});//导航点点击事件委托slideNavLi.click(function (event) {index = $(event.target).index() + oldLength;change();});setTimer();}//设置定时器function setTimer() {timer = setInterval(function () {index++;change();}, time);}function change() {changeSlide();changeNav();}//轮播图切换function changeSlide() {/*      if(slideContent.is(':animated')){return;}*/slideContent.animate({left: -slideWidth * index}, 500, function () {//原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末if (index <= 0) {//当定位到原1时，在回调函数中将slideContent瞬间定位到复1index = oldLength;slideContent.css({left: -slideWidth * index});}if (index >= length - 1) {//当定位到复末时，在回调中将slideContent瞬间定位到原末index = oldLength - 1;slideContent.css({left: -slideWidth * index});}});}//导航点切换function changeNav() {slideNavLi.removeClass('active').eq(index % oldLength).addClass('active');}}</script></body></html>

面向对象封装轮播图
jq:

function ImgMover(elem) {//  ------面向对象jQuery轮播图(1)this.elem = $(elem);//使用jquery获取到最外层的idthis.index = 0;//设置下标的初始值this.setTime();//调用定时器运行模块this.clickNav();//调用点击小圆球切换图片的方法this.leftRight();//调用左右箭头切换图片的方法this.outTime();//调用鼠标移动到图片上停止定时器
}
ImgMover.prototype = {//  ------面向对象jQuery轮播图(2) setTime: function () {// ------定时器运行模块this.time = setInterval(function () {//定时器开启this.lrmove("true");//调用运动模块this.simNAV(this.index >= this.elem.children().eq(0).children().length - 1 ? 0 : this.index);//调用小圆球跟随当前图片的切换；三木运算是因为，实现无缝轮播多添加了一张图片，需要判断，当签下表等于四的时候，就是说明当前已经运动到第五张图片了，但是因为在运动当中，第五张图片已经瞬移到了第一张，所以就要吧小圆球的下标改成0，也就是成了第一个。}.bind(this), 4000);//定时器里使用this获取到的是window，所以要使用bind，定时器时间是三秒；},outTime: function () {// ------鼠标移动到图片上停止定时器var byIndex = this;//是为了在事件中获取的this是window，所有需要先将this储存一下this.elem.mouseover(function () {//当鼠标移入外面最大的div内，就停止（清除）定时器；clearInterval(byIndex.time);});this.elem.mouseout(function () {//当鼠标移出时，就重新调用定时器。byIndex.setTime();});},lrmove: function (a) {// ------运动模块var Oul = this.elem.children().eq(0);//获取到当前的图片ul；if (a == "true") {//true 往右切换图片this.index++;//往右的就是图片按照 --> 箭头方向运动  index会一直加1if (this.index == this.elem.children().eq(0).children().length) {//如果当前元素等于5时，是因为this.index会一直加1，然后当index等当前li的最大下标时，还会进行加1，这时需要图片的总个数，如果等于总个数，就进入判断。Oul.css({ left: 0 })//当前的ul瞬移到0；第一张图片this.index = 1;//把当前的index改成1；}this.simNAV(this.index <= this.elem.children().eq(0).children().length - 2 ? this.index : 0);//小圆点跟随切换，三木运算是因为，小圆点只有四个，就是正确的个数，所以需要正确的下边，如果当前index小于等于(当前总图片减去与第一张相同的图片的个数)的下标，就继续按照当前的下标进行切换，如果大于就切换成0Oul.stop().animate({ left: -this.index * this.elem.children().eq(0).children().eq(0).width() })//将当前的ul进行运动、更改left值，*号后边的，是获取第一张图片的宽度} else if (a == "false") {//false 往左切换图片this.index--;//往左的就是图片按照 <-- 箭头方向运动  index会一直减1if (this.index < 0) {//如果当前的index值小于0，就是说明当前图片已经第一张图片还在往上一张运动let target = this.elem.children().eq(0).width() - this.elem.children().eq(0).children().eq(0).width();//获取的是ul的总宽度减去单张的图片的宽度Oul.css({ left: - target })//将ul瞬移到与第一张照图片一样的哪一张的前一张的位置this.index = this.elem.children().eq(0).children().length - 2;}this.simNAV(this.index);//小圆点跟随切换Oul.stop().animate({ left: -this.index * this.elem.children().eq(0).children().eq(0).width() })//将当前的ul进行运动、更改left值，*号后边的，是获取第一张图片的宽度}},simNAV: function (index) {// ------小圆球模块//自动跟随图片的小圆点 this.elem.children().eq(1).children().eq(index).addClass("active").siblings().removeClass("active");//jquery写法：获取到当前的元素，找到当前下标的元素给添加class类，然后找到当前元素的其他兄弟元素删除class类},clickNav: function () {// ------手动点击小圆球切换图片var byIndex = this;this.elem.children().eq(1).children().click(function () {byIndex.index = $(this).index() - 1;// 调用运动的模块byIndex.lrmove("true");// 调用小圆球跟随的模块byIndex.simNAV($(this).index());})},leftRight: function () {// ------手动点击箭头进行换图var byIndex = this;this.elem.children().eq(2).children().eq(0).click(function () {byIndex.lrmove("false");});this.elem.children().eq(2).children().eq(1).click(function () {byIndex.lrmove("true");})}
}
new ImgMover("#banner");//  ------面向对象jQuery轮播图

用法

  <div class="container" id="banner"><ul id="list"><li style="background: brown">1</li><li style="background: pink">2</li><li style="background: orange">3</li><li style="background: greenyellow">4</li><li style="background: lightblue">5</li><li style="background: brown">1</li></ul><div id="btnlist"><span class="active"></span><span></span><span></span><span></span><span></span></div><div id="btn"><span class="left"><<</span> <span class="right">>></span></div></div>

完善中。。。


http://chatgpt.dhexx.cn/article/DT4ZBgPc.shtml

相关文章

jq轮播图2

jq轮播图2

今天续着上一期的来给大家讲另外一种方法的轮播图   这种方法可以实现无缝轮播，原理就是我们在自己预先想要设置轮播的那一组照片后边，用jq语言在另外加上一组相同的照片，相当于现在的长度就是两组照片的长度，我们将初始的图片索引值就先定在我们复制的第一张图片上，就是…
阅读更多...
jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图

一.轮播图内容组成 包括&#xff1a;4张图片&#xff0c;图片标号&#xff0c;向左翻页&#xff0c;向右翻页的几个部分&#xff0c;如下图所示&#xff1a; 二.实现功能 1.加载页面后&#xff0c;4张图片默认从第一张图片开始轮播&#xff0c;索引值为1。 2.当把鼠标over到…
阅读更多...
jQuery实现各种轮播图

jQuery实现各种轮播图

目录 无限循环滚动 百叶窗 轮播一 轮播二 轮播三 无限循环滚动 * {margin: 0;padding: 0;}div {width: 1120px;height: 300px;border: 1px solid #000;margin: 100px auto;overflow: hidden;}ul {list-style: none;width: 3360px;height: 300px;background: #000;/* backgro…
阅读更多...
git上传代码简单方法 简单git上传代码工具

git上传代码简单方法 简单git上传代码工具

简单git上传代码工具 肯定有很多人和我一样&#xff0c;git上传时候搞不懂拉取&#xff0c;合并等一系列的代码冲突问题&#xff0c;往往可能覆盖掉自己今天写的代码&#xff0c;或者覆盖掉别人的代码。 下面给大家简单介绍一款操作比较简单的上传代码工具&#xff1a;下图这款…
阅读更多...
Git上传代码到GitHub

Git上传代码到GitHub

版本控制&#xff1a;使用Git上传代码到GitHub 本文将帮助大家学会使用Git&#xff08;版本管理工具&#xff09;软件把电脑中的代码或项目上传到GitHub&#xff08;项目托管平台&#xff09;中。 要上传代码到GitHub中&#xff0c;是必须要安装Git软件的&#xff0c;不管是直…
阅读更多...
如何向github上传代码

如何向github上传代码

说明&#xff1a;本人亲测可行 1.首先你要安装git才行&#xff0c;这里不说明。 2.在github上创建个人仓库: 3.复制仓库地址&#xff1a; 4.在本地随便创建一个文件夹&#xff08;注意路径不要中文&#xff09; 5.进入文件中&#xff0c;鼠标右键如果安装成功git,菜单中会多出…
阅读更多...
git上传代码到git/码云gitee

git上传代码到git/码云gitee

一、首先需要下载git https://git-scm.com/ 输入命令:git --version 可查看当前git版本 二.安装后需要一些配置 配置用户名和邮箱: $ git config --global user.name "qinyong" $ git config --global user.email "emailexample.com" qinyong是自…
阅读更多...
如何在mac端上用git上传代码到码云

如何在mac端上用git上传代码到码云

前言&#xff1a;作为一个合格的猿&#xff0c;SVN的使用相信大家已经非常熟悉了&#xff0c;GIT作为一个强大的版本控制工具&#xff0c;也是非常有必要深入学习的。对比两个工具&#xff0c;说说GIT的优缺点&#xff1a; 优点&#xff1a;1、GIT拥有全世界的资源&#xff0c;…
阅读更多...
git上传代码到gitee仓库步骤

git上传代码到gitee仓库步骤

默认电脑第一次安装git且未设置过SSH key 安装git 创建gitee仓库 生成SSH密钥 在你想上传文件所在的文件夹内右键&#xff0c;打开git bash&#xff0c;第一次使用Git时需要先生成SSH ssh-keygen -t rsa -C "your_email"注意&#xff1a;ssh-keygen中间没有空格提…
阅读更多...
git上传代码到码云（详细）

git上传代码到码云（详细）

一、安装git .要使用git 先安转git 请到官网下载最新git http://git-scm.com/downloads 安装完成右键查看下是否有如下图所示的图标 二、本地建立git文件 本次建立的git文件是在本地完成的项目上建立的。找到当前完成项目的文件夹完成如下代码 &#xff08;1&#xff09;“…
阅读更多...
【git】将代码上传到github

【git】将代码上传到github

记录一下用Git初次配置远端仓库的学习过程。 假设你已经下载好了git&#xff0c;同时在github上也有了一个账号。 0.配置SSH 我们打开git bash&#xff0c;然后输入 $ ssh-keygen -t rsa -C "your_emailyouremail.com"这里的your_emailyouremail.com 是你在github…
阅读更多...
怎么用git上传部分代码

怎么用git上传部分代码

怎么用Git上传部分代码? 0&#xff1a;在项目的根目录右键 Git Bash Here 1: 使用命令: git status (查看当前代码状态) 标红的为修改的代码 2&#xff1a;看一下那些文件是想要上传哪些文件是不想要上传的。 使用命令: git add . (全部上传) git add 文件 (上传指定文件) …
阅读更多...
Git代码上传

Git代码上传

以开源仓库为例&#xff0c;公司使用公司的仓库 首先需要注册一个gitee 创建仓 本地安装git 安装地址&#xff1a; https://git-scm.com/download/win 设置环境变量 在cmd设置GIT全局设置&#xff0c;输入你创建仓库的命令 创建git仓库 1、新建文件api_test 2、在cmd切换至此…
阅读更多...
往git上上传代码

往git上上传代码

从Mac的终端上往git上上传代码 前言git的工作原理github的基本操作 前言 因为要完成小组的项目需要用到git&#xff0c;所以我提前学习了一下git的使用。 git的工作原理 首先我了解了一下git的工作原理 一般我们会把项目放到远程仓库里&#xff0c;也就是GitHub里。每个人都…
阅读更多...
Git命令行上传本地代码

Git命令行上传本地代码

该篇文章主要参考(超详细&#xff09;使用git命令行将本地仓库代码上传到gitee/github远程仓库 写此博客主要为了日后查阅方便。 第一步&#xff1a;初始化git。进入到需要上传的项目的目录下&#xff0c;右键找到Git Bah Here&#xff0c;目的是可以直接在当前目录进行初始…
阅读更多...
如何用git上传代码到github详细步骤

如何用git上传代码到github详细步骤

注册账户 想使用github&#xff0c;第一步肯定是要注册github账号&#xff0c;有了账号就是直接登录啦 可以直接打开http://github.com页面注册 创建仓库 注册、登录完成之后&#xff0c;在登录页面最上方用户菜单上选择 “”->New repository 创建一个新的仓库 进入创建仓库…
阅读更多...
如何使用Git上传项目代码到github

如何使用Git上传项目代码到github

github是一个基于git的代码托管平台&#xff0c;付费用户可以建私人仓库&#xff0c;我们一般的免费用户只能使用公共仓库&#xff0c;也就是代码要公开。这对于一般人来说公共仓库就已经足够了。 注册账户以及创建仓库 要想使用github第一步当然是注册github账号了。之后就可以…
阅读更多...
Git上传文件代码到GitHub（超详细）

Git上传文件代码到GitHub（超详细）

Git上传文件代码到GitHub&#xff08;超详细&#xff09; 之前用git上传代码到GitHub上&#xff0c;时间一长又忘了&#xff0c;总结一下写下来&#xff0c;后面上传忘了再看。 1. 新建一个空文件夹&#xff0c;用来上传文件 空文件夹放在那里都可以 2. 点进去空文件夹&am…
阅读更多...
如何在git上传代码

如何在git上传代码

一、git常见指令 1、git clone: 克隆一个git仓库 2、git add . &#xff1a;添加到暂存区 3、git branch &#xff1a;查看所有分支 4、git branch xx &#xff1a;创建分支 5、git commit :提交 6、gitcommit -m "备注" : 这个是提交并中间可以写备注信息 7、…
阅读更多...
git代码上传详细步骤（初学者操作）

git代码上传详细步骤（初学者操作）

看到很多大佬都有自己的github&#xff0c;看上去很酷。有源码&#xff0c;有分享总结。作为初学者当然心动啦。那么搞个项目怎么上传到github呢&#xff1f;我确实有点笨从26号晚上十点到十二点&#xff0c;第二天八点到一点。终于把项目上传上去了。在此做个总结&#xff0c;…
阅读更多...
推荐文章

Copyright @ 2022~2023