使用指令模仿魅族官網的圖片輪播功能（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(../../../images/guidebook/1202-1.jpg);
}
.slider-2{
background: url(../../../images/guidebook/1202-2.jpg);
}
.slider-3{
background: url(../../../images/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);
});
}
};
})