jquery 实现自定义动画效果
   3 分钟阅读

jquery 实现的方法;精简了几次,感觉写的已经没有 BUG 了,代码也蛮精简的;

    /*做的DEMO中一共有5个选项卡;
    *#banner是整个banner区域;包含banner-tittle;banner-body;
    *banner-body:是选项卡需要控制的内容包裹层;
    *banner-left-right 是左右控制器的包裹层;
    * */

DOM 结构如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!--banner区域开始-->
<div id="banner" class="">
    <!--banner-tittle用来做轮播的控制头-->
    <ul class="banner-tittle">
        <li class="select"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="banner-body">
        <div class="banner-body-none">
            <a href="javascript:;">
                <img src="img/index-banner.jpg" alt="杭州微飞胜科技有限公司-banner1"/>
            </a>
            <!--<a href="javascript:;" class="banner1-button debug"><p>马上加入</p></a>-->
        </div>
        <div class="banner-body-none">
            <a href="javascript:;">
                <img src="img/index-banner2.jpg" alt="杭州微飞胜科技有限公司-banner1"/>
            </a>
        </div>
        <div class="banner-body-none">
            <a href="javascript:;">
                <img src="img/index-banner3.jpg" alt="杭州微飞胜科技有限公司-banner1"/>
            </a>
        </div>
        <div class="banner-body-none">
            <a href="javascript:;">
                <img src="img/index-banner4.jpg" alt="杭州微飞胜科技有限公司-banner1"/>
            </a>
        </div>
        <div class="banner-body-none">
            <a href="javascript:;">
                <img src="img/index-banner5.jpg" alt="杭州微飞胜科技有限公司-banner1"/>
            </a>
        </div>
    </div>
    <div class="banner-left-right">
        <div id="banner-left">
            <span class="iconfont">&#58897;</span>
        </div>
        <div id="banner-right">
            <span class="iconfont">&#58898;</span>
        </div>
    </div>
</div>
<!--banner区域结束-->

JavaScript 代码如下;

默认已经载入 jQuery;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var _index=0;
var time = 0;
var $first=$(".banner-body div:first").clone(true);
var $last=$(".banner-body div:last").clone(true);
var $bannerBody = $(".banner-body");
    $banner = $("#banner")
    $bannerLeftRight = $(".banner-left-right")
    $bannerTitLi = $(".banner-tittle li");
var $bannerR = $("#banner-right"),
    $bannerL = $("#banner-left");

$bannerBody.append($first);
$bannerBody.prepend($last);
$bannerBody.css("left","-1920px");
//鼠标放进去后停止动画;
$banner.hover(function() {
    clearInterval(time);
}, function() {
    time = setInterval("junmperRight()", 3000);
});
//鼠标移入,显示向左,向右的按钮;
$banner.hover(function() {
    $bannerLeftRight.fadeIn(300);
}, function() {
    $bannerLeftRight.fadeOut(300);
});
console.log($bannerLeftRight.fadeOut());
$bannerTitLi.click(function(){
    clearInterval(time);
    $(this).addClass("select").siblings().removeClass("select");
    $bannerBody.animate({'left':-1920*($(this).index()+1)+'px'},500);
    _index=$(this).index();
    });

//左右的按钮的事件;
$bannerL.click(function() {
    clearInterval(time);
    junmperLeft();
});
$bannerR.click(function() {
    clearInterval(time);
    junmperRight();
});

//动画效果
function junmperRight() {
    _index++;
    if (_index > 4){
        $bannerBody.animate({'left':-1920*(_index+1)+'px'},500,function(){
            $bannerBody.css('left','-1920px')
        });
        _index = 0;
        $bannerTitLi.eq(_index).addClass("select").siblings().removeClass("select");
    }else{
        $bannerTitLi.eq(_index).addClass("select").siblings().removeClass("select");
        $bannerBody.animate({'left':-1920*(_index+1)+'px'},500);
    }
}
function junmperLeft(){
    _index--;
    if (_index < 0){
        $bannerBody.animate({'left':-1920*(_index+1)+'px'},500,function(){
            $bannerBody.css('left','-9600px')
        });
        $bannerTitLi.eq(_index).addClass("select").siblings().removeClass("select");
        _index = 4;
    }else{
        $bannerTitLi.eq(_index).addClass("select").siblings().removeClass("select");
        $bannerBody.animate({'left':-1920*(_index+1)+'px'},500);
    }
}
time = setInterval("junmperRight()", 3000);

总结:

1、开始写的是直接让现实和隐藏,写好后,发现效果非常生硬;

2、然后想着动态的改变 DOM 结构;DOM 结构默认是 01234 这四个元素;先改变成 40123 这样的;默认显示 0;改变一个就变一下 DOM

    4【0】123 默认的初始状态显示第0个元素
    0【1】234
    1【2】340
    2【3】401
    3【4】012
    大括号内的当前显示的元素;
    写完后,感觉这种的效率太低了;

3、改变元素的位置来控制显示;【最终版】

  • 1、先把元素的 DOM 结构首尾都复制,HTML 结构是 01234;默认编程【4】01234【0】,把 banner-body 的元素从 5 个变成 7 个;
  • 2、根据 index 的控制需要向左偏移的数值;(当在第 4 个元素时候,快速把 banner-body 的位置拉到正确位置;前后同理;具体见源码;)
本文目录