动画片计算,原生js和jquery完结图片轮播特效

页面营造和js前端不得不说的这一点事儿

2012/10/30 · CSS,
JavaScript · 1
评论 ·
CSS,
Javascript

来源:微博UDC –
张传亮

用作今日头条的页面营造工程师,首要职分就是选拔html&css,高品质的做到静态页面的打造,保障项目标准时达成。而页面必要的js效果则交由下游的js前端工程师去做。在新浪,那多少个岗位是分开的。但在豪门的合计定势里或许认为那多个职位应由一个人来成功最好,终究,页面营造工程师写的html结构不肯定是js工程师想要的那种,js工程师可能有更快速的点子。所以,在页面营造以前最好能与js工程师调换一下,把落到实处方案确定好。

亚洲必赢官网 1

但在实际上项目流程中,当举办到页面打造的时候,产品经营可能还没布署到js资源,那时大家不得不根据产品的需求和投机的想法去写html结构,不仅要考虑到设计稿的还原度、浏览器的包容性、将来或然要抬高的新作用的预知地方,还要考虑怎么写html结构能让js最便捷的做到产品的相互成效。作为一名有义务感的页面打造工程师,表示亚历山大!所以,大家平常翻看页面源码时,会发现这么的声明,用来告诉js工程师怎么去操作dom结构。

亚洲必赢官网 2

有时候为了做到最简,咱们要考虑浓密,前一阵子的London奥林匹克运动会,微博首页右边要添加一个奥运金牌榜的模块,须要有收起和拓展的按钮,用来显示不同的内容。

亚洲必赢官网 3

对网站以来那是很稀松平日的彼此作用。具体html落成大概有同学会想到,做八个div,各自蕴含展开的剧情和收受的始末。在点击展开按钮时出现一个,另一个逃匿;而在点击收起的时候做反而的拍卖。那种事本人也从没对与错,能促功用益就好。但作为出现在今日头条首页的模块,并且出现在首先屏的地点,对质量的优化肯定是要做足的。能尽只怕在大家css这一层做的,决不放到js那边去做。我的处理形式是把收起展开的体制都写好,放在一块儿,让js在默许展开或点击展开的时候突显turn_olym_on,在点击收起的时候更换为turn_olym_off,那样js就只是更换一个class名的代码量,而对此开展收起的多个按钮,我也通过更换的class名来显示和隐身。

具体html代码:
亚洲必赢官网 4

在那边把富有应用的代码全体放在一块儿,把某种景况时不要显示的隐藏掉,比如展开状态时,class=”show_less
W_linecolor”的div和进展的按钮class=”W_moredown”不用突显,就足以在最外层的div上写:
亚洲必赢官网 5

css暂时隐没掉那两成分:
亚洲必赢官网 6

而当收起的时候,最外层的div就成为:
亚洲必赢官网 7

css则把在此之前隐藏的多个要素彰显出来,并把须求隐藏的排名榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及接收的按钮class=”W_moreup”隐藏:
亚洲必赢官网 8

如此,就只必要js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就足以了,其他的隐藏浮现全体有css来解决。

总结:

询问部分上下游工作的文化,让上下游关系更顺畅,提升工作效用,是大家一齐的对象。
页面创设的工作,面临着累累的挑衅,日前html5的新标签、高级浏览器原生援助的各样api,还有css3非同日常好玩的新属性等等。。。都亟需我们去上学,不求完全控制,但求能精通熟练,能知晓是怎么回事。把学到的新知识应用到实在项目中,对集团对集体对友好都有益~

元芳,你怎么看?

赞 收藏 1
评论

亚洲必赢官网 9

亚洲必赢官网 10

css样式选拔器

标签上设置style属性:

<body>
    <div style="background-color: #2459a2;height: 48px;">第一层</div>
    <div style="background-color: #2459a2;height: 48px;">第二层</div>
    <div style="background-color: #2459a2;height: 48px;">第三层</div>
</body>

直白在div里写绝对应的体裁

id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">第一层</div>
</body>

把体制写到head里面,以#起来命名,调用对应样式在div里用id属性指定相应的id名

class选择器(最常用)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div class="c1">第一层</div>
     <div class="c1">第二层</div>
     <div class="c1">第三层</div>
</body>

把体制写到head里面,以.早先命名,调用对应样式在div里用class属性指定相应的类名,可以多个div调用

标签选拔器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>
     <div >第二层</div>
     <div >第三层</div>
</body>

标签采取器,设置div样式,则body里装有的div标签内的始末都会动用此内容

关联选择器(层级选取器)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>

        <div >span里的div</div>

     <div >第三层</div>
</body>

只让span里面的div标签应用样式,可多层嵌

动画片计算,原生js和jquery完结图片轮播特效。结合选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div id="i1">第一层</div>
     <div id="i2">第一层</div>
     <div id="i3">第一层</div>
</body>

组合拔取器,加,号,相同样式多命名

天性接纳器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{width: 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

据悉属性举行筛选匹配,唯有首先个input标签匹配上对应的体裁

 

 

(1)首先是页面的布局局地

css样式引用

css样式优先级

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            background-color:black;
        }
    </style>
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>

假使体制不抵触,则样式都利用,倘使体制有争辩,style样式优先级最大,其次其余的装置编写的各类,越靠近越优先

文件措施引用样式

概念样式并保存到commons.css文件

.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}

引用commons.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>

  

对读过的几篇小说的下结论,尽量确保逻辑性,不断填补、精简、改正。
背后会列出参考小说地址,方便今后取用。感激各位作者以及翻译者。

对于自个儿那种左右切换式

css样式边框

骨干边框

<body>
    <div style="border: 1px dotted red;">
        第一层边框
    </div>
<!--border:边框宽度  solid:边框样式实线(dotted虚线)颜色:red-->
</body>

边框其余样式

<body>
    <div style="height: 48px;
    width: 80%;
    border: 1px solid brown;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    ">第二层边框</div>

    <!--height: 48px 边框高度-->
    <!--width: 80% 宽度页面的80%-->
    <!--border: 1px solid brown 边框宽度、样式、颜色-->
    <!--font-size: 16px;  字体大小-->
    <!--text-align: center; 水平居中-->
    <!--line-height: 48px; 垂直居中-->
</body>

-》》点击突显效果 

 

  • AngularJS
    动画思考

    • 一、怎么样采用

        • 1)大家须求打造什么
        • 2)怎么着让它工作
        • 3)先导大家的程序
          • (1)
            文件结构,如下
          • (2) index.html
            :
          • (3) Angular 程序
            app.js:
          • (4) 视图 page-home.html, page-about.html,
            page-contact.html:
          • (5) 为App添加动画功效style.css:
            • CSS动画
            • 跻身和距离动画效果
            • 切实页面的动画效果
          • (6)预览地址:
    • 二、进阶

        • 1)其他类
          class
        • 2)注意事项
    • 参考文档

1.率先是个外围部分(其实也就是最外边的总体wrapper)

CSS样式浮动

初识float

<body>
    <div style="width: 20%;background-color: red;float: left;">左边</div>
    <div style="width: 80%;background-color: black;float: right;">右边</div>
</body>

-》》点击呈现效果

float测试页

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-header">
        <div style="float: left;">*收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="clear: both"></div>
    </div>
</body>

-》》点击展现效果

注:<body
style=”margin: 0 auto;”>化解与浏览器顶部之间的缝缝;<div style=”clear:
both”></div>子边框浮动后,突显父边框的边框线

 

一、怎样采用

在angular中大家接纳 ngAnimate 添加过渡和卡通片效果。

通过一个为 ng-view 添加动画功能的例子来演示使用办法

2.接着就是你设置图片轮播的地点(也就是一个banner吧)

CSS样式display

块级标签和行内标签相互转换

<body>
    <div style="background-color: red;display: inline">块级</div>
    行内
</body>

-》》点击突显效果

注:display:inline
转换为行内标签;display:block转换为块级标签;另还有display:none不显得

行内标签:不可以设置中度,宽度,padding margin

块级标签:设置高度,宽度,padding margin

<body>
    行内
    <div style="background-color: red;display: inline">块级</div>
</body>

-》》点击呈现效果

注:display:inline-block
既有inline的性质(暗许自个儿有多少占多少)又有block的习性(可以安装中度、宽度、padding、margin)

 

1)大家要求营造什么

  • 使用 ngRoute 来为我们的页面路由

  • 使用 ngAnimate 来为页面创立动画效果

  • 对页面使用 CSS Animations

  • 当大家离开或进入试图时,大家的每个页面会有两样的卡通片效果

3.然后是一个图片组(可以用新的div 也得以直接动用 ul–>li格局)

CSS样式边距

外边距margin

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

-》》点击突显效果

注:margin-top:25px意味外边距,子边框与父边框top之间的距离为25px

内边距padding

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

-》》点击显示效果

注:padding-top:25px意味内边距,子边框内自身与top之间的离开为25px

 

2)怎么样让它工作

ngAnimate 会依据是跻身依旧距离视图来为区其余Angular
指令(directive)添加和移除差别的CSS类名。例如,当大家加载网站时,无论ng-view中填充了怎样都会收获一个.ng-enter的类名。

大家所急需做的就是给.ng-enter
类名添加CSS动画效果,该动画在进入的时候会自动生效。

ngAnimate 可以动用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow,
ngHide, ngView 以及 ngClass

亚洲必赢官网 11亚洲必赢官网 12

4.然后是图表两端的左箭头和右箭头
5.然后是一个晶莹剔透背景层,放在图片底部

CSS样式position

**fixed定位到浏览器某个地点(相当于float)**

归来顶部按钮

有个须要,好多页面都有重返顶部的按钮,随着你页面的下拉,按钮永远在页面的右下角,上面就来贯彻:

<body>
    <div style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd";>
    </div>
</body>

心想事成动态效果,点击再次来到

<body style="margin: 0 auto">
    <div onclick="GoTop();"  style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;margin: 0;">ddddddddddddd
    </div>

    <script>
        function GoTop() {
            document.body.scrollTop=0;
        }
    </script>
</body>

恒定菜单栏:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

relative+absolute(相对与relative固定路径)

<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>

多层模态

用了position样式落成三层页面;当页面整个浮动在地点的时候,纵然想让页面整体覆盖底层页面,要用到top,right,left,bottom属性,而非margin-top、margin-left….

<body
    <div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
    background-color: white;height: 500px;width: 500px"></div>

    <div style="z-index:9;position: fixed;background-color: black;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.5"></div>

    <div style="height: 5000px;background-color: green"></div>
</body>

当页面现身多层时,用z-index:10数值来确定浮动层的光景关系;opacity:0.5设置页面透明度(1意味着完全覆盖);fixed;top: 50%;left:
50%;margin-left:-250px;margin-top:-250
px最顶层的div进行居中处理;

 

3)开头大家的程序

6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul–>li)

CSS样式overflow

偶尔会有那种场地出现,看示例

<body>
    <div style="height: 200px;width:140px;overflow: hidden ">
        <img src="i.png" />
    </div>
</body>

外层定义div中度和宽窄后,最终显示的功效依旧以图片的深浅为准的,图片把外围div给撑开了,那时候可以用到上面俩个天性

overflow:auto 图片出现滚动条

<body>
    <div style="height: 200px;width:140px;overflow: auto">
        <img src="i.png" />
    </div>
</body>

overflow:auto
图片只显示div设置的尺寸,其余一些隐藏

<body>
    <div style="height: 200px;width:140px;overflow: hidden">
        <img src="i.png" />
    </div>
</body>

  

(1) 文件结构,如下
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html

7.然后是一个按钮层,用来稳定图片组的index吧,放在透明背景层的右下角(div
或 ul–>li)

CSS样式hover

可以看一下抽屉网的顶部条栏,当鼠标移动到选项栏时,背景颜色会晤世变化;下边就来试试搞一下以此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
            color: white;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display:inline-block;
            padding: 0 10px 0 10px;
        }
        .pg-header .menu:hover{
            background-color: #BF1919;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a >LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
            <a class="menu">爆文</a>
        </div>
    </div>
    <div class="pg-body">
    </div>
</body>
</html>

其中.pg-header
.menu:hover{background-color:
#BF1919}指定当鼠标滑过引用.menu字段时,字段样式变成新定义的体制

 

(2) index.html :

加载 AngularJS, ngRoute 以及 ngAnimate。用 bootstrap.css 来定义样式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <!-- load bootstrap (bootswatch version) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS -->
    <!-- load angular, ngRoute, ngAnimate -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
    <script src="app.js"></script>

</head>

<!-- apply our angular app -->
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>

</body>
</html>

透过,可以先构造出html结构

CSS样式background

之前平素在用backgroud样式基本上都是设置背景颜色什么,其实background仍可以安装背景为图片

background-image

<body>
    <div style="background-image: url('i.png');height: 700px;width: 700px">
    </div>
</body>

专断认同div框架有多大,图片重复放置占的岗位就有多大

background-repeat

<body>
    <div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
    </div>
</body>

background-repeat有多少个属性repeat(暗许,重复占满)、no-repeat(不重复)、repeat-x(只横着再一次放)、repeat-y(只竖器重新放)

background-position-x、background-position-y

来得图片中一定的岗位图标

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>

background-position-x表示看背景图片的窗口水平方向想右移动,background-position-y代表看背景图片的窗口垂直向下移动;两者可以简写成:

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position:20px 40px"></div>
</body>

针对background全体还有越发简约的写法:

element.style {
    background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
    background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
    background-position-x: -105px;
    background-position-y: -212px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(248, 248, 248);

background: #f8f8f8
url(image/5.png) -105px -212px no-repeat;
同时设定了颜色,图片,位置,是不是repeat

 

 

Python开发【前端】:HTML-》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】:JavaScript–》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】:DOM–》》http://www.cnblogs.com/lianzhilei/p/6072367.html

 

(3) Angular 程序 app.js:

创办程序、路由以及控制器。

// app.js

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'mainController'
        })

        // about page
        .when('/about', {
            templateUrl: 'page-about.html',
            controller: 'aboutController'
        })

        // contact page
        .when('/contact', {
            templateUrl: 'page-contact.html',
            controller: 'contactController'
        });

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});
<div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
      <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
(4) 视图 page-home.html, page-about.html, page-contact.html:

为种种页面准备一些文字以及链到其他页面的链接地址。

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-contact.html -->
<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

相持于事先,知识充实了多个箭头img标签

(5) 为App添加动画效率 style.css:

ngAnimate为我们的ng-view添加的五个类分别是.ng-enter和.ng-leave

(2)CSS样式部分(图片组的处理)跟淡入淡出式就不等同了

CSS动画
/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0%         { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%     { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to         { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to         { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from     { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
    from     { transform:translateX(100%); }
    to         { transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from     { transform:translateY(100%); }
    to         { transform: translateY(0); }
}

淡入淡出只必要体现或许隐藏对应序号的图纸就行了,直接通过display来设定

进去和距离动画效果

大家只必要将那几个动画片效果应用给.ng-enter 或
.ng-leave就足以为大家的页面添加不用的动画效果。

/* style.css */
...

    .ng-enter             { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
    .ng-leave             { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

...

左右切换式则是运用图片li 浮动,父层成分ul
总宽为总图片宽,并设定为有限banner宽度下埋伏超出宽度的片段

实际页面的动画效果
...

    .ng-enter         { z-index: 8888; }
    .ng-leave         { z-index: 9999; }

    /* page specific animations ------------------------ */

    /* home -------------------------- */
    .page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
    .page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

    /* about ------------------------ */
    .page-about.ng-enter         { animation:slideInRight 0.5s both ease-in; }
    .page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

    /* contact ---------------------- */
    .page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
    .page-contact.ng-enter         { animation:slideInUp 0.5s both ease-in; }

...

接下来当想切换来某序号的图样时,则动用其ul 定位 left样式设定相应属性值落成

(6)预览地址:

比如说显示第一张图片开始定位left为0px, 要想体现第二张图纸则须要left:-400px
处理

二、进阶

<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>

1)其他类 class

  • ng-enter-activeng-leave-active

    对于 ng-repeat
    重如果对一个list的展现,这么些要素是是被成立出来到场到DOM结构中去的,那么,它的卡通进度为

    创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态
    默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
    

    可以经过设置.ng-enter(.ng-leave) 和
    .ng-enter-active(.ng-leave-active)
    的体裁,加上css3的动画来突显出动画,如:

    <!-- HTML片段 -->
    <div ng-init="users = [1,2,3,4,5]"></div>
    <input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
    <ul>
    <li class="item" ng-repeat="user in users | filter: u as result">
      {{user}}
    </li>
    </ul>
    
    /* css片断 */
    /*ng-repeat的元素*/
    
    .item{
      -webkit-transition: all linear 1s;
      -o-transition: all linear 1s;
      transition: all linear 1s;
    }
    /*动画开始前*/
    .item.ng-enter{
      opacity:0;
    }
    /*动画过程*/
    .item-ng-enter-active{
      opacity:1;
    }
    
  • ng-enter-stagger

    下面的功用是对持有因素同时接纳,可能实际运用中需求有一个程序的渐变出现的效果,那时候可以安装ng-enter-stagger来实现.

    /*不同时出现*/
    .item.ng-enter-stagger {
        transition-delay:0.5s;
        transition-duration:0;
    }
    
  • ng-enter-prepare

    这是一个不同常常的类,可以在骨子里的动画开始在此以前预防不要求的闪耀的始末。

    <div ng-class="{red: myProp}">
     <div ng-class="{blue: myProp}">
      <div class="message" ng-if="myProp"></div>
     </div>
    </div>
    

    只怕在输入动画时期,.message div将在起来动画化以前被急促地察看。
    在那种气象下,可以向CSS添加上边的体裁,以有限支持在动画启动前成分保持隐身

    .message.ng-enter-prepare {
      opacity: 0;
    }
    
  • ng-animate-ref

    经过利用名为ng-animate-ref的性情配对成分,来跨应用程序的构造区域(如视图)之间穿插动画成分的法力。
    tips:自身清楚为,跨页面的配对成分之间的联网效果
    合法例子:

(3)页面基本已经打造好久得以开展js的处理了

2)注意事项

  • 使用 ng-hide 时需加上

    .ng-hide-add,.ng-hide-remove{ 
    display: block!important; 
    }
    

    防护眨眼间间藏身

  • 关于ng-showng-hideng-if的区别(有空子单独写一篇统计)。

    容易地说:
    ng-if:成分存在不存在。
    ng-showng-hide:成分彰显不显得(本人是存在的)。

    例如:列表最终一行成分的上边框隐藏,ng-showng-hide会出标题。

    li:last-child{
    border-bottom:none;
    }
    

    又比如:ionic的header里按钮的留存或然显示对题目字数的影响。

一、jQuery方式

参考文档

  • [原]

    [译]

照常先说jq处理

1.全局变量等

 var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数

2.自动切换定时器处理

   // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

3.为左右箭头添加事件处理

左箭头

  //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });

右箭头

 //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });

里面autoChangeAgain()就是一个重置定时器函数

//清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

个中changeTo()就是一个图片切换的处理函数

function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

每传入一个图形序号,则按理举行goLeft

4.为右下角的那些li 按钮绑定事件处理

//对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });

jq就是如此,简便,原生代码量就有些多了

一体化代码

<!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-Type" content="text/html; charset=utf-8" />
<title>图片轮播 jq(左右切换)</title>
<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}
  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
  <div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript">
  var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });
  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }
  function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }
  </script>
</body>
</html>

二、js 原生完结

js原生大约也就是仿照jq的达成思路

1.全局变量等

var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

2.自行切换定时器处理

    // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

亚洲必赢官网,一律的,有一个重置定时器的函数

 //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

3.因为有局地class呀,所以来多少个class函数的效仿也是亟需的

 //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

4.要左右切换,就得模拟jq的animate–>left .

自个儿的笔触就是动态地设置element.style.left
举行固定。因为要有一个渐进的长河,所以加上的一点点品级处理。

定点的时候left的装置也是有点复杂的..要考虑方向等情况

 //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

地点也来看了,我先导了left的值为0px

自我试过了,如若不上马只怕把伊始的left值写在行内css样式表里边,就总会报错取不到

于是间接在js中初阶化恐怕在html中内嵌早先化也可。

5.接下来就是切换的函数完毕了,比如要切换来序号为num的图纸

//左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移一定距离
    //设置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }

6.然后再给左右箭头还有右下角那堆index绑定事件处理

 //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

7.最后的最终,没啥了. 噢好像还要调用一下下非凡 add伊芙nt() ..

完全代码  代码量有些冗杂..

<!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-Type" content="text/html; charset=utf-8" />
<title>图片轮播 js原生(左右切换)</title>
<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
  <div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
  var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

  //调用添加事件处理
  addEvent();

  //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

  //左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移一定距离
    //设置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }


  //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

  //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

  </script>
</body>
</html>

上述所述就是本文的全体内容了,希望大家可以欣赏。

你只怕感兴趣的作品:

  • js完结下一页页码效果
  • javascript分页代码(当前页码居中)
  • 某页码显示的helper
    少量调整,另附js版
  • javascript
    援助页码格式的分页类
  • javascript结合CSS完结苹果开关按钮特效
  • js落成图片无缝滚动特效
  • 一个简约的JS鼠标悬停特效具体方法
  • js文字横向滚动特效
  • js已毕文字闪烁特效的法子
  • 23个Javascript弹出窗口特效整理
  • 十分多浏览器的字幕特效Marquee的通用js类
  • 纯JS已毕可用以页码更换的飞页特效示例
网站地图xml地图