angularJS指令实战，制作一个可复用的幻灯组件(一)

插件源码

点击下载

动机：

Jquery发展至今,幻灯组件已经非常成熟，为什么要造这样一个轮子呢？我们先来看一下传统的Jquery插件是如何来生成一个幻灯插件的。

HTML部分:

<div class="cc" id="plugin">    <ul class="cc">        <li>            <img src="1.jpg" alt=""/>            <p>标题</p>        </li>        <li>            <img src="1.jpg" alt=""/>            <p>标题</p>        </li>        <li>            <img src="1.jpg" alt=""/>            <p>标题</p>        </li>    </ul></div>

javascript部分:

$('#plugin').plugin({ //pluginoptions })

CSS部分:

#plugin li{float:left;*display:inline;margin:10px;width:200px;height:200px;position:relative;}#plugin li img{width:200px;height:200px;}#plugin li p{position:absolute;bottom:0;left:0;width:100%;background-color:black;opacity:.5;font:12px/35px "宋体";height:35px;}

其实在大部分情况下这已经是很简便的方式了，只是 我的懒 超乎你的想象！在我看来这简直不能再麻烦了，首先我得写js，完事想加点配置例如说加个左右按钮还得到js里面去写配置，更烦的是每次写这个插件还得自己重头写一遍css，于是我便起意用angular写一个可以复用的组件，我希望我每次调用的时候只要写这些代码就行：

HTML部分：

<div slider><li>            <img src="1.jpg" alt=""/>            <p>标题</p>    </li><li>        <img src="1.jpg" alt=""/>        <p>标题</p>    </li><li>        <img src="1.jpg" alt=""/>        <p>标题</p>    </li></div>

js部分：

一！行！都！不！用！写！

css部分：

#plugin{@include slider();}

嗯~ 这样偷懒是不是爽多了呢.. 想这样偷懒么？想偷懒的各位请移步https://github.com/RenShine/ngSlide/这里就可以了哦，下一篇文章我将讲解这个插件是如何制作出来的。angularJS指令实战，制作一个可复用的幻灯组件(二)