jquery手写轮播功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>小例子</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
            @charset "utf-8";
            /* CSS Document */
            
            #main {
                margin-top: 20px;
            }
            
            * {
                margin: 0;
                padding: 0;
                word-wrap: break-word;
            }
            
            a {
                text-decoration: none;
            }
            
            a:link {
                text-decoration: none;
            }
            
            a:visited {
                text-decoration: none;
            }
            
            a:hover {
                text-decoration: none;
            }
            
            a:active {
                text-decoration: none;
            }
            
            a.underline:hover {
                text-decoration: underline;
            }
            
            a img {
                border: none;
            }
            
            body {
                margin: 0px;
                padding: 0px;
                position: relative;
            }
            
            body,
            td,
            div,
            a,
            li,
            form {
                color: #391f0e;
                line-height: 20px;
                font-family: Arial, "Microsoft yahei"
            }
            
            div,
            form,
            p,
            img,
            ul,
            ol,
            li,
            dl,
            dt,
            dd,
            button,
            input {
                margin: 0px;
                padding: 0px;
                font-size: 12px;
            }
            
            li {
                list-style: none;
            }
            /*table{font-size: 13px;}*/
            
            .clear {
                clear: both !important;
                width: 0px !important;
                height: 0px !important;
                line-height: 0px !important;
                overflow: hidden !important;
                padding: 0 !important;
                margin: 0 !important;
                float: none !important;
                position: static !important;
                background: none !important;
            }
            /* For IE 6/7 (trigger hasLayout) */
            
            .fl {
                float: left;
            }
            
            .fr {
                float: right;
            }
            
            .block {
                display: block !important;
            }
            
            .box {
                width: 100%;
                margin: 0 auto;
                height: auto;
            }
            
            .w {
                width: 1000px;
                margin: 0 auto;
            }
            /*通用样式结束*/
            
            .a_a {
                height: 500px;
                overflow: hidden;
                position: relative;
            }
            
            .a_b {
                height: 500px;
                width: 5000px;
                transition: width 1s, height 1s, transform 1s;
                -moz-transition: width 1s, height 1s, -moz-transform 1s;
                -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
                -o-transition: width 1s, height 1s, -o-transform 1s;
            }
            
            .a_c {
                width: 1000px;
                height: 500px;
            }
            
            .left {
                background: url(../img/064.png) no-repeat;
                height: 60px;
                width: 60px;
                background-size: 100% 100%;
                position: absolute;
                top: 250px;
                left: 370px;
            }
            
            .left:hover {
                cursor: pointer;
            }
            
            .right:hover {
                cursor: pointer;
            }
            
            .right {
                background: url(../img/063.png) no-repeat;
                height: 60px;
                width: 60px;
                background-size: 100% 100%;
                position: absolute;
                top: 250px;
                left: 1500px;
            }
        </style>
    </head>

    <body>

        <div class="box">
            <div class="w a_a">
                <div class="a_b">
                    <div class="a_c fl" style="background-color: gray;"></div>
                    <div class="a_c fl" style="background-color: darkmagenta"></div>
                    <div class="a_c fl" style="background-color: blue;"></div>
                    <div class="a_c fl" style="background-color: green;"></div>
                    <div class="a_c fl" style="background-color: paleturquoise;"></div>
                    <div class="clear"></div>
                </div>
            </div>

            <div class="left"></div>
            <div class="right"></div>
        </div>

        <script>
            $(function() {
                $('.left').click(
                    function() {
                        var a = $('.a_b').attr('id').substr(1, 4); //substr 截取字符串 从索引1的位置开始截取 截取4个字符串

                        alert(a);

                        if(a != 0) {
                            var e = a - 1000;
                            $('.a_b').attr('id', -e);
                            $('.a_b').css("transform", "translate(-" + e + "px)");
                        }
                    }
                )

                $('.right').click(
                    function() {
                        var a = $('.a_b').attr('id');
                        if(a != -4000) {
                            var e = a - 1000;
                            $('.a_b').attr('id', e);
                            $('.a_b').css("transform", "translate(" + e + "px)");
                        }
                    }
                )
            })
        </script>

    </body>

</html>

jquery 写tab切换：

　　　　　　　　　　$(function()
                {
                    $('.about-5-1>div').click(
                        function()
                        {
                            var i = $(this).index();   　　　　　　　　　　　　 //定义变量i 为当前对象的索引。
                            $(this).parent().siblings('div').hide();
                            if(i == 0) {
                                $(this).parent().siblings('.about-5-2').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 1) {
                                $(this).parent().siblings('.about-5-3').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 2) {
                                $(this).parent().siblings('.about-5-4').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 3) {
                                $(this).parent().siblings('.about-5-5').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                        }
                    )
                })

jquery手写轮播功能

相关文章