一直想开个博客,写下自己学习的过程,在今天终于把这件事开始了。自己对于前端的理解,再加之从事这个行业,都是很有缘分的事。
在信息化爆炸的这个时代,互联网的变化更是特别迅速。我觉得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>
文章的结尾,第一篇博客可能就是自己的一个从无理到有序的开端。我希望自己多去记录,自己所喜欢的东西,能跟业界各个小伙伴,互相成长。