Use Angularjs to imitate the image carousel function of Meizu official website

Use instructions to mimic the image Carousel feature of the Meizu website (DOM operations in Angularjs are done in the instructions)

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);

});

}

};

})

This article is from the "8577105" blog, please be sure to keep this source http://8587105.blog.51cto.com/8577105/1591016

Use Angularjs to imitate the image carousel function of Meizu official website