Archive

1
2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/zxdslider.js" type="text/javascript"><!--mce:1--></script>

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

<div id="zxdslider">
        <span class="slidernav leftnav left">&lt;</span>
                <ul id="zxdsliderContent">
                        <li class="zxdsliderli">
                                <img src="/demo/zxdslider/img/a1.jpg" alt="a1" />
                                <span>
                                        <h2><a href="html5beta.com/category/jquery-2/" rel="bookmark" title="jQuery is sweet!">jQuery is sweet!</a></h2>
                                        <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
                                </span>
                        </li>
                        <li class="zxdsliderli">
                                <img src="/demo/zxdslider/img/a2.jpg" alt="a2" />
                                <span>
                                        <h2><a href="html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is small!">jQuery is sweet!</a></h2>
                                        <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
                                </span>
                        </li>
                        <li class="zxdsliderli">
                                <img src="/demo/zxdslider/img/a3.jpg" alt="a3" />
                                <span>
                                        <h2><a href="html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is easy to use!">jQuery is sweet!</a></h2>
                                        <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
                                </span>
                        </li>
                        <li class="zxdsliderli">
                                <img src="/demo/zxdslider/img/a4.jpg" alt="a4" />
                                <span>
                                        <h2><a href="html5beta.com/category/jquery-2/" rel="bookmark" title="zxdSlider is ?!">jQuery is sweet!</a></h2>
                                        <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.</p>
                                </span>
                        </li>
                </ul>
        <span class="slidernav rightnav right">&gt;</span>
</div> <!-- #zxdslider-->

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

#zxdslider {
        width: 960px;
        height: 262px;
        position: relative;
        overflow: hidden;
        background:#555;
        margin:10px 0px 25px 0px;
        padding:0;
}
#sliderContent {
        width: 880px;/*its  #zxdslider's width - .slidernav's width*/
        padding:0;
        margin:0;
}
.zxdsliderli{
        float: left;//must have this
        position: relative;
        display: none;/*must have this*/
        width:880px;/*its  #zxdslider's width - .slidernav's width*/
        height:262px;
}
.zxdsliderli span {
        position:absolute;/*must have this*/
        right:0;
        font: 13px Arial, Helvetica, sans-serif;
        width:370px;
        color: #ddd;
        display: none;/*must have this*/
        top: 0;
        padding: 10px 13px;
        margin:0 40px 0 0;
}
.zxdsliderli img{
        margin:6px;
}
.zxdsliderli a{
        color:#fff;
}
#zxdslider h2 {
        line-height: 40px;
}
#zxdslider h2 a {
        color: #ddd;
}
.slidernav{
        height:262px;
        width:40px;
        font-size:38px;
        color:transparent;
        line-height:250px;
}
.slidernav:hover{
        cursor:pointer;
}
.rightnav{
        text-align:right;
}
.left{float:left}/*must have this*/
.right{float:right}/*must have this*/

1
2
3
4
5

<script type='text/javascript'>
$(function($) {
        $("#zxdslider").zxdSlider();
})
</script>

1
2
3
4
5
6
7
8
9

}).bind("blur.autocomplete", function (c) {
                if (!a.options.disabled) {
                    clearTimeout(a.searching);
                    a.closing = setTimeout(function () {
                        a.close(c);
                        a._change(c)
                    }, 150)
                }
            })

1
2
3
4
5
6
7
8
9
10
11

}).bind("blur.autocomplete", function (c) {
                if (!a.options.disabled) {
                    clearTimeout(a.searching);
                    a.closing = setTimeout(function () {
                        a.close(c);
                        a._change(c)
                    }, 150)
                }
            }).bind('input',function (c) {
				a.search(a.item);
			})

1
2
3

#content .hide {
	display: none;
}

1
2
3
4
5
6
7

    $('.show').hover(
        function(){
        $(this).find(".hide").show("normal");
        },
        function(){
        $(this).find(".hide").hide("normal");
        });