“纸上得来终觉浅，觉知此事要躬行”—

一直想开个博客，写下自己学习的过程，在今天终于把这件事开始了。自己对于前端的理解，再加之从事这个行业，都是很有缘分的事。
在信息化爆炸的这个时代，互联网的变化更是特别迅速。我觉得HTML是地基，JS是设计图，CSS是装饰。
今天，给大家分享一个轮播图的实现。它可以通过点击下面的方块，或者是左右的按钮，使得图片进行移动，达到轮播的效果。

这是HTML部分：

<div id="box1"><img /><a class="left"><</a><a class="right">></a><ul class="page"><!--<li class="cur"></li><li></li><li></li><li></li>--></ul></div><div id="box2"><img /><a class="left"><</a><a class="right">></a><ul class="page"><!--<li class="cur"></li><li></li><li></li><li></li>--></ul></div>

这是CSS部分：

<style>*{margin: 0;padding: 0;}#box1,#box2{height:200px;width: 300px;position: relative;margin: 20px auto;margin-top: 60px;}img{height:200px;width: 300px;position: absolute;}a{text-decoration: none;height: 24px;width: 24px;background: #ccc;top:50%;margin-top: -14px;position: absolute;} .left{left:0;}.right{right: 0;}.page{height: 36px;width:auto;/*background: #ccc;*/position:absolute;bottom: -44px;left: 26%;}li{height: 30px;width: 30px;background: #ccc;list-style: none;margin-left: 10px;float: left;}li.cur{background: cornflowerblue;}</style>

这是JS部分：

<script>function fn(id,arr){var box=document.getElementById(id),img=box.getElementsByTagName('img')[0],oA=box.getElementsByTagName('a'),ul=box.getElementsByTagName('ul')[0],oLi=ul.getElementsByTagName('li');var num=0;for(var i=0;i<arr.length;i++){ul.innerHTML+='<li></li>';}function clear(){for(var i=0;i<oLi.length;i++){oLi[i].className='';}}clear();function fn(){img.src=arr[num];oLi[num].className='cur';}fn();oA[1].function(){num++;if(num==arr.length){num=0;}clear();fn();}oA[0].function(){num--;if(num<0){num=arr.length-1;}clear();fn();}for(var i=0;i<oLi.length;i++){oLi[i].index=i;oLi[i].function(){clear();img.src=arr[this.index];oLi[this.index].className='cur';num=this.index;}}}fn('box1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']);   fn('box2',['img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg']); </script>

文章的结尾，第一篇博客可能就是自己的一个从无理到有序的开端。我希望自己多去记录，自己所喜欢的东西，能跟业界各个小伙伴，互相成长。

“纸上得来终觉浅，觉知此事要躬行”——博客起始相关推荐

纸上得来终觉浅绝知此事要躬行
摘自:https://baike.baidu.com/item/%E7%BA%B8%E4%B8%8A%E5%BE%97%E6%9D%A5%E7%BB%88%E8%A7%89%E6%B5%85%EF%B ...
纸上得来终觉浅，绝知此事要躬行。
在ITPUB上看帖子的时候,有个网友的回复就是标题中的一句诗:纸上得来终觉浅,绝知此事要躬行. 为弄明白这首诗的含义,我GOOGLE了,在百度知道中找到相关解释.觉得其中的意思比较适合我目前的状态. ...
纸上得来终觉浅，绝知此事要躬行
周末时,领导在团队一个小群分享了一篇文章,全文很长周二时打开了看了十几分钟,因为其他事情被打断,只看了1/5不到就搁置了今天是周三,负责技术管理的同事将文章转到了大群,一起发出来的还有一张思维导图 ...
【人生参悟】纸上得来终觉浅，绝知此事要躬行
这几天一直在研究saltstack和zabbix,参看了不少文档和博客,终于saltstack的部署研究得7788,zabbix所需要的LNMP环境也搭建完毕了.纵观这几天的工作,我有一个很深的感悟, ...
就业感言：纸上得来终觉浅，绝知此事要躬行
来源:华清远见嵌入式学院就业部学员姓名:曲仕辉所在班级:北京1001期班就业单位:朝歌宽带工作职位:应用开发工程师转眼间在华清远见嵌入式培训结束了,我也找到了一份比较满意的工 ...
学内核之十八：纸上得来终觉浅，绝知此事要躬行
目录 0 前言 1 ioremap.vmalloc与原子上下文 2 copy_to_user与进程上下文 3 fasync与指针初始化 4 wait_event_interruptible与条件变量 ...
每日启程——2019.12.15（纸上谈来终觉浅，绝知此事要躬行。）
每日启程--2019.12.15(纸上谈来终觉浅,绝知此事要躬行.) 早上本来想多睡一会.没想到对面的工地可不答应.硬是一锤一锤的把我叫醒.好吧,谁叫我昨天晚上睡得太晚了呢.不过呢.昨天没有做启程和总 ...
纸上得来终觉浅，决知此事要躬行
这两天很忙,忙着弄自己的本本.现在才知道我们这专业没有计算机是不行了,要想搞好学习工作首先要有一个稳定良好的计算机环境. 前段时间在机子上装了卡巴,但是开机后反应数度非常的慢,就和死机了一般.当时恨的 ...
2020上半年总结：纸上得来终觉浅，绝知此事要躬行
Author:AXYZdong 自动化专业工科男有一点思考,有一点想法,有一点理性! 定个小小目标,努力成为习惯!在最美的年华遇见更好的自己! CSDN@AXYZdong,CSDN首发,AXYZd ...

“纸上得来终觉浅，觉知此事要躬行”——博客起始

“纸上得来终觉浅，觉知此事要躬行”——博客起始相关推荐

最新文章

热门文章