零基础一篇文章实现网页轮播图效果，我太难了啊

时间 2020-02-13

标签零基础一篇文章实现网页效果太难栏目 HTML 繁體版

原文原文链接

你瞅啥？

有没有想过？一直从事流水线操做的你，或许在编程中的流程控制方面天赋异禀。有没有想过？一直以来左右逢源的你，或许也能靠手中的键盘作点大事？有没有想过？平时好像平淡无奇的你，或许身上埋藏了“程序员”的惊奇骨骼。css

或者，也许你并无！那么跟我一块儿动手试试就知道了！html

不扯淡，上干货！

咱们要作的成果展现（轮播图）：前端

菜单（须要的材料）：

html语言（处理页面结构）
css语言（美化页面）
javaScript语言（让页面动起来）

咱们分别用3大模块来单独实现，作这个就别想那个java

编写页面骨架html

咱们在某个文件夹内点击鼠标右键，新建一个__文本文件__,像这样
接着咱们在里面编写以下代码
标签有单、双之分，双标签以</标签名>为结束，标签内的标签是装在里面的东西
下面的结构是yong_hu_kan包含lun_bo_tu_he_zi

<html>
    <head>
        <title>这是个人轮播图页面哟</title>
    </head>
    <body>
        <div id="yong_hu_kan">
           <div id="lun_bo_tu_he_zi">
           		<!-- 这里将来放点东西 -->
            </div>     
        </div>
    </body>
</html>
复制代码

接着在里面放入3组程序员

盒子

图片（ http的那个是图片地址，不要去手抄哟）

<div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmesH11iotzh7lM0G292gt2X2cmdsxkgO5bl2O4yRGf9GN2HWz.D661rMtBCu5EbBQAwjheXdpWZllS6w9itABFIM!/b&bo=yADIAAAAAAACFzM!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>

复制代码

接着运行程序，最简单的方法就是把刚才的编写的文件__用鼠标左键脱到浏览器中再放手__,如无心外，你将看到编程

兄嘚,那么你的html页面就完成了浏览器

CSS美化一下

敲黑板了！布局

在head标签中加入以下代码，设置他们的宽高学习

<style> #yong_hu_kan { width:200px; height:200px; } #lun_bo_tu_he_zi { width:600px; height:200px; } </style>

复制代码

让图片横着排列 ,那就让luo_bo_tu_he_zi 里面的3个div都向左漂浮就好,继续在style标签中加入以下代码ui
1. ```
#lun_bo_tu_he_zi div {
    float:left;
}
复制代码
```
好了，记得Ctrl S 键来保存一下，保存之后，把文件丢到浏览器中，你将看到：
接下来还有一个障碍要扫清（别问为何，我太难了）
2. 接着咱们在style标签中加入
3. ```
body { margin:0px; }
复制代码
```

至此CSS美化就搞定！！！

JavaScript篇

这一篇呢，想比以前的会难一些，出现的知识盲点也是没法避免的，因为篇幅有限，你只用知道有什么用、怎么用就行了

先来个热场，在body标签的结束标签上方编写

<script> // 这里将来会放代码，下面的body不要照抄， // 写出来是让你们知道位置 </script>
</body>
复制代码

首先咱们先分析一下，我们如今3张图应该都横向排列了，那么接下来分解一下任务，代码写到script标签里面：

获取已经设置600px宽度的lun_bo_tu_he_zi盒子（内有3组div img）
1. ```
var ele = document.getElementById('lun_bo_tu_he_zi')
复制代码
```
让图1向左移动，出现图2，再向左移动，出现图3
1. ```
ele.style.left = ele.offsetLeft - 200   'px';
复制代码
```
2. 以上代码的意思是 描述位置：设置有多靠左 = 如今有多靠左 - 200（图片宽）拼接 'px'

每次的移动须要间隔1秒再移动（代码是固定格式）

setInterval(function() {
    // 你要作的是
},1000)
复制代码

目前设置了盒子的left属性，盒子还不能移动，缘由是默认布局方式相似摆货架，左边是墙壁，无法让其往左边移动，所以咱们给他设置绝对定位，就能够随处飞，甚至飞出屏幕外。
那么来吧，理解了就往下写
1. ```
ele.style.position = 'absolute';
ele.style.left = '0px';
复制代码
```
2. 第一，设置绝对定位就能够随便飞absolute（绝对的意思）。第二，设置一个它开始的left位置为墙壁靠边边（道理相似与善始善终）

整理一下，如今我们的代码是这样的（//是注释，不影响程序运行，仅仅让人能看懂代码

<style> // 获取盒子 var ele = document.getElementById('lun_bo_tu_he_zi'); // 让它飞 ele.style.position = 'absolute'; // 设置从哪飞 ele.style.left = '0px'; // 每隔一秒作什么事 setInterval(function () { // 设置它有多靠左 = 如今有多左 - 200 拼接'px' ele.style.left = ele.offsetLeft - 200 'px'; },1000) </style>	
复制代码

好了，接下来能够看效果了,记得保存文件和刷新浏览器

修修补补

哎哟哎哟，刚才发现图怎么移动就都没了？

究其缘由就是咱们没有控制他何时回到初始继续滚动

接下来问题来了，那么第三步应该干吗？还向左继续移动吗？那不就啥也没有了！！所以咱们须要让他回到起点，即：设置left = 0px; 还继续后续的移动，咱们将代码修改为以下：

setInterval(function () {
    // 若是知足（）里面的条件就执行后续，不然执行else
    if (ele.offsetLeft <= -400) {
        // 设置它有多靠左 = '0px'
     	ele.style.left ='0px';
    } else {
        // 设置它有多靠左 = 如今有多左 - 200 拼接'px'
    	 ele.style.left = ele.offsetLeft - 200   'px';
    }
},1000)

复制代码

如今再好了，接下来就是美化的事了：

3个图片同时出现很差看，咱们须要出现一个，则须要把随着盒子不断向左移动而超出
盒子的内容隐藏掉。咱们用css给它设置3个样式
1. ```
#yong_hu_kan {
 		overflow: hidden;
        position: relative;
}
复制代码
```
2. 第一个属性是超出部分隐藏，第二个属性是因为咱们以前设置绝对定位是起飞，所以让页面不在知道盒子之间的包含关系了，所以咱们这里声明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的关系
再来加个慢慢过渡的效果
1. 针对那个元素？回答：#lun_bo_tu_he_zi
2. 哪个属性的改变须要过渡？回答：left
3. 过渡时间放缓，须要几秒完成？回答：1s
4. ```
#lun_bo_tu_he_zi {
    transition:left 1s;
}
复制代码
```

搞定！看效果

写在最后

哎哟，累死了，由于有些知识存在盲区，因此讲解的时候几乎都是左顾右盼来说解的，最后但愿你们都能经过这个案例对于前端有必定的兴趣，我是武汉人，但愿你们能借着此次疫情明白，荒年饿不死手艺人的道理，也但愿你们能够多学习，少追星。。。另外：有须要源码或者作到一半不会作的同窗能够想办法联系我，由于不能发第三方的联系方式，因此通常都是关注私信之类的来联系了