用angularjs模仿魅族官网的图片轮播功能

使用指令模仿魅族官网的图片轮播功能(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);

});

}

};

})

时间: 2024-11-05 13:38:31

用angularjs模仿魅族官网的图片轮播功能的相关文章

使用javascript,jquery实现的图片轮播功能

使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以直接把代码copy下来,放入一个html 文件即可,然后把jquery文件放在同一个文件夹下就可以了.文件下载地址:http://download.csdn.net/detail/xyytcs/5037545 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

原生Js_实现图片轮播功能功能

用javascript图片轮播功能功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片轮播</title> <style> #swaper{ width: 520px; margin: 0 auto; } #number{ position: relative; top: -30px; right: -320px; } l

Jquery实现图片轮播功能

周末闲暇时,参照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html实现了个jquery图片轮播特效 界面效果: css实现: *{     margin: 0; } div{     position:relative;     width:600px;     height:400px;     border:1px #000 solid;     overflow:hidden;     margin:aut

一个简单的图片轮播功能(图片自动播放,点击控件可直接跳转对对应图片)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

基于bootstrap的图片轮播功能

插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script> HTML代码: <div id="pic

使用JS实现图片轮播(前后首尾相接)

最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能. 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

onethink插件二(首页图片轮播)

2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响其他代码 二.效果图: 下载地址:http://download.csdn.net/detail/douniwan123654/7704095 onethink插件二(首页图片轮播)

沉浸式图片轮播器 -- DDGBannerScrollView使用文档

写在前面 几乎每个app都会用到图片轮播器,而且图片轮播器也越来越高大上,沉浸式等拉高了APP的档次 ,没有一个高大上的图片轮播器,都不好意思上架. 像一些知名的app都采用了图片轮播的背景渐变色,举几个栗子:优酷的首页,喜马拉雅,蜻蜓fm,哔哩哔哩漫画等, page索引也是玩的很高大上,系统的早已满足不了了需求. 鉴于此和项目的需要,在前人的基础上,整理了一个这个库,志在简单的几句代码,就能让应用看上去高大上. github:[DDGBannerScrollView](https://gith

安卓图片轮播图

最近自己根据领导要求app启动页面要放产品图片(以轮播的形式),方便用户查看,做了一个简单的demo,实现了基本图片轮播功能,亲测可用. csdn地址:https://download.csdn.net/download/qq_35702985/11545257 下面贴了几乎全部代码: MainActivity: String[] urls = getResources().getStringArray(R.array.url);List list = Arrays.asList(urls);i