使用指令模仿魅族官网的图片轮播功能（angularjs中DOM操作都在指令中完成）

html

<div class="slider" broadcast>

<div class="slider-wrap">

<div class="slider-1 page"></div>

<div class="slider-2 page"></div>

<div class="slider-3 page"></div>

</div>

<ul class="bullet">

<li class='fa'></li>

<li class="fa"></li>

<li class="fa"></li>

</ul>

</div>

css

.slider{

position: relative;

width:900px;

height: 398px;

margin:0 auto;

}

.slider-wrap{

height: 398px;

}

.slider-wrap .page{

display: none;

position:absolute;

width:900px;

height: 398px;

}

.page{

background-repeat: no-repeat;

background-position: center center;

}

.slider-1{

background: url(../../../p_w_picpaths/guidebook/1202-1.jpg);

}

.slider-2{

background: url(../../../p_w_picpaths/guidebook/1202-2.jpg);

}

.slider-3{

background: url(../../../p_w_picpaths/guidebook/1202-3.jpg);

}

.bullet{

position:absolute;

width:90px;

padding: 0px;

bottom: 10px;

right:20px;

z-index: 2;

}

.bullet li{

list-style: none;

width: 10px;

height: 10px;

border-radius: 5px;

margin:0 10px;

cursor: pointer;

float:left;

}

.bullet li:hover{

background: #14b1c4;

}

.fa{

background: #fff;

}

.libg{

background: #14b1c4;

}

directives

angular.module('gbApp').directive('broadcast',function(){

return{

restrict:'EA',

link:function(scope,element,attr){

var slider=element.find('.slider-wrap').children(),

bullet=element.find('ul').children(),

length=slider.length,

current=0,

temp='',

time='',

loopSpeed=4000,

fadeSpeed=2000,

loop=function(){

slider.eq(current).fadeOut(fadeSpeed);

bullet.eq(current).removeClass('libg');

if (current==(length-1)){

current=-1;

}

current+=1;

slider.eq(current).fadeIn(fadeSpeed);

bullet.eq(current).addClass('libg');

};

slider.eq(0).show();

bullet.eq(0).addClass('libg');

time=setInterval(loop,loopSpeed);

bullet.on('click',function(){

var index=$(this).index();

slider.eq(index).fadeIn().siblings().fadeOut();

bullet.eq(index).addClass('libg').siblings().removeClass('libg');

clearInterval(time);

current=index;

time=setInterval(loop,loopSpeed);

});

}

};

})