![9d1f7c91043e58d27e79d5efd7c4e73a.png](https://i-blog.csdnimg.cn/blog_migrate/c9fb47179b798eb42e28671fe87dbdce.jpeg)
你瞅啥?
有没有想过?一直从事流水线操作的你,或许在编程中的流程控制方面天赋异禀。有没有想过?一直以来左右逢源的你,或许也能靠手中的键盘做点大事?有没有想过?平时好像平淡无奇的你,或许身上埋藏了“程序员”的惊奇骨骼。
或者,也许你并没有!那么跟我一起动手试试就知道了!
![21f29293823d4bfb42394f34ae42774e.png](https://i-blog.csdnimg.cn/blog_migrate/67d14732dbaf2315d3aaac9eafa51b98.jpeg)
不扯淡,上干货!
我们要做的成果展示(轮播图):
![1aeba77ef3ad2fda2da6db223ef38819.gif](https://i-blog.csdnimg.cn/blog_migrate/bf036b00b6472e34c3f67617d0d9c25d.gif)
菜单(需要的材料):
- html语言(处理页面结构)
- css语言(美化页面)
- javaScript语言(让页面动起来)
我们分别用3大模块来单独实现,做这个就别想那个
编写页面骨架html
- 我们在某个文件夹内点击鼠标右键,新建一个文本文件,像这样
- 接着我们在里面编写如下代码
- 标签有单、双之分,双标签以为结束,标签内的标签是装在里面的东西
- 下面的结构是yonghukan包含lunbotuhezi
<html>
<head>
<title>这是我的轮播图页面哟</title>
</head>
<body>
<div id="yong_hu_kan">
<div id="lun_bo_tu_he_zi">
<!-- 这里未来放点东西 -->
</div>
</div>
</body>
</html>
- 接着在里面放入3组
盒子
图片(http的那个是图片地址,不要去手抄哟)- `html
![4f799175d815a9b4acb669d7459e1a45.png](https://i-blog.csdnimg.cn/blog_migrate/5ff47d990d46e508d18eb6576ba79dd8.png)
![ecc2e42ae4a8aac8efe6daa15092756b.gif](https://i-blog.csdnimg.cn/blog_migrate/a59cc66018bbb529ec8dba79af78042c.gif)
![4f799175d815a9b4acb669d7459e1a45.png](https://i-blog.csdnimg.cn/blog_migrate/5ff47d990d46e508d18eb6576ba79dd8.png)
6. 接着运行程序,最简单的方法就是把刚才的编写的文件__用鼠标左键脱到浏览器中再放手__,如无意外,你将看到<img src="https://graph.baidu.com/resource/2229d403d2fb9ddab946f01581441581.png" alt="image-20200211222322610" style="zoom:50%;" />
__兄嘚,那么你的html页面就完成了__
#### CSS美化一下
__敲黑板了!__![image-20200211225738616](https://img-blog.csdnimg.cn/20200212014442739.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)
1. 在head标签中加入如下代码,设置他们的宽高
1. ```html
<style>
#yong_hu_kan {
width:200px;
height:200px;
}
#lun_bo_tu_he_zi {
width:600px;
height:200px;
}
</style>
- 让图片横着排列 ,那就让luobotuhezi 里面的3个div都向左漂浮就好,继续在style标签中加入如下代码
- `css
lunbotuhezi div {
float:left;}
3. 好了,记得Ctrl S 键来保存一下,保存以后,把文件丢到浏览器中,你将看到:![image-20200211230247790](https://img-blog.csdnimg.cn/20200212014442972.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)
4. 接下来还有一个障碍要扫清(别问为什么,我太难了)
1. ![image-20200211231332879](https://img-blog.csdnimg.cn/20200212014443243.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)
2. 接着我们在style标签中加入
3. ```css
body { margin:0px; }
至此CSS美化就搞定!!!
JavaScript篇
这一篇呢,想比之前的会难一些,出现的知识盲点也是无法避免的,由于篇幅有限,你只用知道有什么用、怎么用就好了
先来个热场,在body标签的结束标签上方编写
<script>
// 这里未来会放代码,下面的body不要照抄,
// 写出来是让大家知道位置
</script>
</body>
![78c15cccb59a28702c4d4785fea8e8ea.png](https://i-blog.csdnimg.cn/blog_migrate/c14acf9e3f656e109a8b9b4159712dc0.jpeg)
![4af90e004c9f51c73cc7a1bf80508676.png](https://i-blog.csdnimg.cn/blog_migrate/48f7c72cfcb48906fb1471c5f73fb82e.jpeg)
首先我们先分析一下,咱们现在3张图应该都横向排列了,那么接下来分解一下任务,代码写到script标签里面:
- 获取已经设置600px宽度的lunbotuhezi盒子(内有3组div img)
- `js
var ele = document.getElementById('lunbotuhezi')
- `js
2. 让图1向左移动,出现图2,再向左移动,出现图3
1. ```js
ele.style.left = ele.offsetLeft - 200 'px';
- 以上代码的意思是 描述位置:设置有多靠左 = 现在有多靠左 - 200(图片宽) 拼接 'px'
- 每次的移动需要间隔1秒再移动(代码是固定格式)
- `js
setInterval(function() {
// 你要做的是
},1000)
4. 目前设置了盒子的left属性,盒子还不能移动,原因是默认布局方式类似摆货架,左边是墙壁,没法让其往左边移动,因此我们给他设置绝对定位,就可以随处飞,甚至飞出屏幕外。![image-20200211233903679](https://img-blog.csdnimg.cn/202002120144442.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)
5. 那么来吧,理解了就往下写
1. ```js
ele.style.position = 'absolute';
ele.style.left = '0px';
- 第一,设置绝对定位就可以随便飞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>
好了,接下来可以看效果了,记得保存文件和刷新浏览器
![6f8549a5fcbb5323aeb9f0f19f216ce3.gif](https://i-blog.csdnimg.cn/blog_migrate/4092c51fa43aefac982b8a4d32bef507.gif)
修修补补
哎哟哎哟,刚才发现图怎么移动就都没了?
究其原因就是我们没有控制他什么时候回到初始继续滚动
![e37241f0aa6243b358c636aa8f178379.png](https://i-blog.csdnimg.cn/blog_migrate/1896ab60a550242d15e01226ae2fa68c.jpeg)
接下来问题来了,那么第三步应该干嘛? 还向左继续移动吗?那不就啥也没有了!!因此我们需要让他回到起点,即:设置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个样式- `css
yonghukan {
overflow: hidden;position: relative;}
2. 第一个属性是超出部分隐藏,第二个属性是由于我们之前设置绝对定位是起飞,因此让页面不在知道盒子之间的包含关系了,因此我们这里声明一下,也就是#yong_hu_kan和#lun_bo_tu_he_zi的关系
2. 再来加个慢慢过渡的效果
1. 针对那个元素? 回答:#lun_bo_tu_he_zi
2. 哪一个属性的改变需要过渡? 回答:left
3. 过渡时间放缓,需要几秒完成? 回答:1s
4. ```css
#lun_bo_tu_he_zi {
transition:left 1s;
}
搞定!看效果
![ce809a6a66ee686ed55faa229d26390b.gif](https://i-blog.csdnimg.cn/blog_migrate/ce9d91b0b53f0702304316a830441bb3.gif)
写在最后
哎哟,累死了,因为有些知识存在盲区,所以讲解的时候几乎都是左顾右盼来讲解的,最后希望大家都能通过这个案例对于前端有一定的兴趣,我是武汉人,希望大家能借着这次疫情明白,荒年饿不死手艺人的道理,也希望大家可以多学习,少追星。。。另外:有需要源码或者做到一半不会做的同学可以想办法联系我,因为不能发第三方的联系方式,所以一般都是关注 私信之类的来联系了
![2506f68f9ea79d6dd3128ab8eb5395de.gif](https://i-blog.csdnimg.cn/blog_migrate/0b0bccacb49af4975c0614236e5d2171.gif)