前端开发jQuery幻灯片

js开发和web前端 javaweb开发前端 extjs5前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul,
        ol {
            list-style: none;
        }
        #play {
            position: relative;
            width: 1350px;
            height: 400px;
            font-size: 60px;
            overflow: hidden;
        }
        #play ul {
            width: 2600px;
            height: 300px;
            position: absolute;
            left: -400px;
        }
        #play ul li {
            float: left;
        }
        #play img {
            width: 400px;
            height: 300px;
            margin-top: 50px;
            opacity: .7;
        }
        #play .left,
        .right {
            position: absolute;
            top: 0px;
            z-index: 2;
            width: 420px;
            height: 400px;
            background: #DDF;
            opacity: 0;
            cursor: pointer;
        }
        #play .left {
            left: 0px;
        }
        #play .right {
            right: 0px;
        }
    </style>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js”></script>
    <script>
        $(function () {
            $(‘#play ul li img’).eq(2).css({
                width: ‘500px’,
                height: ‘400px’,
                marginLeft: ’25px’,
                marginRight: ’25px’,
                marginTop: ‘0’,
                opacity: ‘1’
            });
            var n = 1;
            var dj = true;
            $(‘#play .right’).on(‘click’, function () {
                if (dj) {
                    n = 1;
                    n++;
                    dj = false;
                    run();
                };
            });
            $(‘#play .left’).on(‘click’, function () {
                if (dj) {
                    n–;
                    dj = false;
                    run1();
                };
            });
            function run() {
                $(‘#play ul’).animate({ left: -800 }, 666, function () {
                    $(‘#play ul li’).first().appendTo(‘#play ul’);
                    $(‘#play ul’).css(‘left’, ‘-400px’);
                    n–;
                    dj = true;
                });
                $(‘#play ul li img’).eq(n + 1).animate({ width: 500, height: 400, opacity: 1, marginLeft: 25, marginRight: 25, marginTop: 0 }, 666);
                console.log(n);
                $(‘#play ul li img’).eq(n).animate({ width: 400, height: 300, opacity: .5, marginLeft: 0, marginRight: 0, marginTop: 50 }, 666);
            };
            function run1() {
                $(‘#play ul’).animate({ left: ‘0’ }, 666, function () {
                    $(‘#play ul li’).last().prependTo(‘#play ul’);
                    $(‘#play ul’).css(‘left’, ‘-400px’);
                    n++;
                    dj = true;
                });
                $(‘#play ul li img’).eq(n + 1).animate({ width: 500, height: 400, opacity: 1, marginLeft: 25, marginRight: 25, marginTop: 0 }, 666);
                $(‘#play ul li img’).eq(n + 2).animate({ width: 400, height: 300, opacity: .5, marginLeft: 0, marginRight: 0, marginTop: 50 }, 666, function () { console.log(n); });
            }
        });
    </script>
</head>
<body>
    <div id=”play”>
        <ul>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093724j7muvr193kybfzmr.jpg”></li>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093814zdffy6d3d7400pqf.jpg”></li>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093747yktfktqam4i3mooo.jpg”></li>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093745uo3gwfvw80fr0sr2.jpg”></li>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093745zpty66r6vubbryg1.jpg”></li>
            <li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093731va7rfamaealwuveu.jpg”></li>
        </ul>
        <div class=”left”></div>
        <div class=”right”></div>
    </div>
</body>
</html>

前端接口开发java angularjs前端开发流程 前端开发和java开发哪个难

» 本文来自:前端开发者 » 《前端开发jQuery幻灯片》
» 本文链接地址:https://www.rokub.com/5759.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!