Life of xhu - 重复造轮子之改造博客&首页的图片轮播

这几天看以前的博客前端页面又不爽了，感觉这种风格不大气，其实我是看的一个网站改的，但是我这能力，照着样子改也改的不像，干脆推到重做了。

选用的前端轮子依然是Semantic，用了这么久，感觉这个轮子用得比另一个著名轮子Bootstrap好多了，首先是语义明确，比如在颜色上，黑色就是black，红色就是red，这可比Bootstrap里什么warning之类的直观多了，还有常用的grid视图，前者用的是grid和column之类的单词，Bootstrap在2.x的时代的span和offset还是比较正常的，到了3.x，col-md这种命名方式真的不要太难看啊。虽然Semantic强行占用了.ui的命名空间，插件也几乎没有，但是在小项目上，我还是喜欢这个轮子多一点，至少写起来舒服。

页面上方的菜单栏，直接就是Semantic里的.fixed.main.menu，图标都是这个框架自带的icon，背景图片是从Logdown上扒下来的。

说起插件，就不得不说写前端的人几乎都会写过的一个东西，就是图片轮播，这算是jQuery的入门必做项目了。我以前博客首页的图片是简单的下拉显示，在以前那种风格似乎还可以，但是换了现在这种风格后，这种直接下拉真是说不出的难看，还是做一个图片轮播吧，要是用Bootstrap的话，直接就有现成的插件可以用，但是用Semantic的话，就只能自己找了Orz。。。

Google之后，发现了一个挺不错的图片轮播插件flexslider2，在项目之外改的差不多了，但是在放进项目里时显示出错，而且怎么改都改不好，看来是因为命名空间错乱了。算了，直接上手做一个吧。

先把代码放上来，首先是slim里的元素排列：

#frame
    #pics
        #item1
            a href='/posts/2014/46*一些吐槽%20&%20HOJ_1511%20&%20HOJ_1513*20140408*吐槽-HOJ-栈'
                img.home_img src='/res/Iamprogrammer.jpg'
                h3.home_label 我不是“写代码的”，请叫我程序员，谢谢。
        #item2
            a href='http://www.bilibili.tv/sp/RWBY'
                img.home_img src='/res/rwby.jpg'
                h3.home_label Team Rwby!!
        #item3
            a href='http://movie.mtime.com/75499/'
                img.home_img src='/res/bb.jpg'
                h3.home_label BreakingBad是部好美剧。 ——跳大飞机

图片轮播这个部分是在一个#frame这个div里的，然后是3个div，每个里面都是一个链接，这个链接包含一张图片和一个说明。

接下来是css部分：

.home_label {
    float:right;
    line-height:40px;
}

.home_img {
    border-radius:10px;
    width:100%;
    height:70%;
}

#pics > div {
    width:33.333%;
    float:left;
}

#frame {
    margin-top:70px;
    width:100%;
    overflow:hidden;
}

#pics {
    width:300%;
    overflow:hidden;
    position:relative;
}

这里的关键部分在于#pics和#pics>div的定义，首先#frame的宽度是填满整个父元素的，而#pics的宽度，则是由图片的数量决定的，因为目前有三张图，所以其宽度是#frame的三倍，再把#pics>div的宽度设定为父元素的1/3，.home_img的宽度设为100%，这样可以保证每张图片的宽度正好为#frame的宽度。然后定义#pics>div的float属性，因为三张图片的宽度都是#pics的1/3，所以三张图片会并排在#pics里。然后把#frame的超出范围的子元素设为hidden，把#pics位置设为relative，这样，用jQuery控制#pics的left值，就可以控制显示在#frame范围里的图片了。

然后就是js部分了：

var turn2 = 1200;
//图片向右移动的函数
function slidepic1(){
    //每次移动前都获得一次#frame的宽度
    var move_width = $('#frame').width()
    switch(turn2 % 3){
        case 0:{
            $('#pics').animate({left:(0 - move_width)},'slow');
            break;
        }case 1:{
            $('#pics').animate({left:(0 - move_width * 2)},'slow');
            break;
        }case 2:{
            $('#pics').animate({left:0},'slow');
            break;
        }default:
            break;
    }
    turn2 += 1
}

//图片向左移动的函数
function slidepic2(){   
    var move_width = $('#frame').width()
    switch(turn2 % 3){
        case 2:{
            $('#pics').animate({left:(0 - move_width)},'slow');
            break;
        }case 0:{
            $('#pics').animate({left:(0 - move_width * 2)},'slow');
            break;
        }case 1:{
            $('#pics').animate({left:0},'slow');
            break;
        }default:
            break;
    }
    turn2 -= 1
}

$(document).ready(function(){
    setInterval('slidepic1()',8000)   //图片每8秒钟向右移动一次
    $('#rightb').click(function(){    //右移的按键，直接调用上面的右移函数
        slidepic1()
    })
    $('#leftb').click(function(){     //左移的按键，直接调用上面的左移函数
        slidepic2()
    })
})

这段代码的具体含义代码里的注释已经说明白了，我就不多说了，下面两个按键，就是首页上控制图片移动的按键，直接调用函数就行。至于那两个函数，我懒得优化了。然后是turn2的初值，因为如果在一开始就左移的话，turn2 -= 1会产生负值导致后面代码出错，所以干脆设了一个很大的模3得0的数，应该没有人会蛋疼到左移1200次吧。

这样一个简陋但是实用的图片轮播插件就搞定了，算是一次很好的前端实践吧，我觉得，手动做一个这样的图片轮播插件还是有一些必要的，而且也不乏闪光点：

每次移动图片都是检测#frame的宽度，确保在窗口尺寸改变的情况下移动到了正确的地方。
宽度都是用父元素的百分比表示，在不同宽度的屏幕上依然能够正确显示。
元素少而且明确，基本不会污染命名空间。

然后就是一些在造轮子过程中的小技巧分享时间了~

元素的z-index属性表示堆叠的优先级，数字越大越上层，但是只有在设置了position属性的元素上才有效果。
有时候设置了text-align为center，元素却无法正确居中，这时候，可以这样做，这样子元素就可以正确显示在父元素中间了：
1. 设置父元素的position为relative，子元素的position为absolute；
2. 设置子元素的left为50%，再设子元素的margin-left为负值，负值的绝对值为自身宽度的一半。
通过以下代码可以引入一个图标库，当然，也可以这样在网页上嵌入一个字体
```
  @font-face{
      font-family:'icons';
      src:url(/fonts/icons.ttf); 
  }
```