手风琴风格图片轮播

发表于 | 分类于

今天在http://www.w3cfuns.com/notes/20618/7af828f7b6b7f9d1bb127a9cfbb3267c上看到这个效果，所以拿来练练手，太久没动脑子了，得让它活动活动。

轮播效果：
轮播图

在该文章的基础上，我自己添加了自动轮播的效果

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>手风琴切换</title>
</head>
<style type="text/css">
    .ts {
        overflow: hidden;
        width: 1072px;
        margin: 0 auto;
    }
    .ts-ul {
        overflow: hidden;
        width: 100%;
        height: 500px;
        margin: 0 auto;
        padding: 0;
    }
    .ts-ul li {
        list-style-type: none;
        overflow: hidden;
        float: left;
        width: 95px;
        -webkit-transition: width 0.5s;
    }
    .ts-ul b {
        -webkit-transition: all 0.5s;
        width: 95px;
        display: block;
        height: 440px;
        text-indent: -9999em;
        background: url(http://gyc.woniu.com/tg/ad6/images/ts.jpg);
    }

    .ts-ul-li1 {
        background: url(http://gyc.woniu.com/tg/ad6/images/ts1_on.jpg) no-repeat;
    }

    .ts-ul-li2 {
        background: url(http://gyc.woniu.com/tg/ad6/images/ts2_on.jpg) no-repeat;
    }

    .ts-ul-li3 {
        background: url(http://gyc.woniu.com/tg/ad6/images/ts3_on.jpg) no-repeat;
    }
    .ts-ul-li4 {
        background: url(http://gyc.woniu.com/tg/ad6/images/ts4_on.jpg) no-repeat;
    }
    .ts-ul li.on {
        width: 787px;
    }
    .ts-ul li.on b{
        opacity: 0;
        filter: Alpha(opacity=0);
    }
    .ts-ul-li1 b {
        background-position: 0 0
    }
    .ts-ul-li2 b {
        background-position: -95px 0
    }
    .ts-ul-li3 b {
        background-position: -190px 0
    }
    .ts-ul-li4 b {
        background-position: -285px 0
    }
</style>

<body>
    <div class="ts">
        <ul class="ts-ul">
            <li class="ts-ul-li1"><b></b></li>
            <li class="ts-ul-li2"><b></b></li>
            <li class="ts-ul-li3"><b></b></li>
            <li class="ts-ul-li4"><b></b></li>
        </ul>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {    
            var li_warp=$('.ts-ul')
            var totle=li_warp.children('li').length;
            var index=-1;
            var timeOut=null;    
            $(".ts-ul li").eq(0).addClass('on');
            $(".ts-ul li").hover(function(){
                clearInterval(timeOut);
                $(".ts-ul li").removeClass("on");
                $(this).addClass("on");
                index=$(this).index();
//                console.log(index);
            },function(){
                autoPlay();
            });
            function autoPlay(){
                timeOut=setInterval(function(){
                    index++;                    
                    $(".ts-ul li").eq(index).addClass('on').siblings('li').removeClass('on');
                    if(index==totle){
                        index=0;
                    }                        
                },4000);
            }
            autoPlay();
        });
    </script>
</body>

</html>

热评文章