淘宝无缝轮播图效果

传智播客前端与移动开发百度云
web前端开发移动端适应
移动平台开发 前端面试

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            .banner {
                width: 520px;
                height: 280px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            .banner .img {
                width: 3000px;
                position: absolute;
                left: 0;
                top: 0;
            }
            .banner .img li {
                float: left;
            }
            .num {
                position: absolute;
                left: 0;
                bottom: 20px;
                font-size: 0;
                text-align: center;
                width: 100%;
            }
            .num li {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background: #888;
                display: inline-block;
                margin: 0 3px;
            }
            .num li.active {
                background: #f60;
            }
            .btn {
                width: 30px;
                height: 50px;
                background: rgba(0, 0, 0, 0.3);
                color: #fff;
                font-family: ‘宋体’;
                font-size: 40px;
                position: absolute;
                top: 50%;
                cursor: pointer;
                display: none;
            }
            .banner:hover .btn {
                display: block;
            }
            .btn-left {
                left: 0;
            }
            .btn-right {
                right: 0;
            }
        </style>
        <script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>
    </head>
    <body>
        <div class=”banner”>
            <ul class=”img”>
                <li>
                    <a href=””
                        ><img
                            src=”https://img.alicdn.com/tfs/TB15IyMRpXXXXXdXpXXXXXXXXXX-520-280.jpg”
                    /></a>
                </li>
                <li>
                    <a href=””
                        ><img
                            src=”https://img.alicdn.com/tfs/TB1LykHRpXXXXadaXXXXXXXXXXX-520-280.jpg”
                    /></a>
                </li>
                <li>
                    <a href=””
                        ><img
                            src=”https://aecpm.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg”
                    /></a>
                </li>
                <li>
                    <a href=””
                        ><img
                            src=”https://img.alicdn.com/simba/img/TB10SIcRpXXXXa5apXXSutbFXXX.jpg”
                    /></a>
                </li>
            </ul>
            <ul class=”num”></ul>
            <div class=”btn btn-left”>&lt;</div>
            <div class=”btn btn-right”>&gt;</div>
        </div>
        <script type=”text/javascript”>
            $(function() {
                var i = 0
                var clone = $(‘.banner .img li’)
                    .first()
                    .clone()
                $(‘.banner .img’).append(clone)
                var size = $(‘.banner .img li’).size()
                for (var j = 0; j < size – 1; j++) {
                    $(‘.banner .num’).append(‘<li></li>’)
                }
                $(‘.num li’)
                    .first()
                    .addClass(‘active’)
                $(‘.btn-left’).click(function() {
                    i++
                    move()
                })
                $(‘.btn-right’).click(function() {
                    i–
                    move()
                })
                function move() {
                    if (i == size) {
                        $(‘.banner .img’).css(‘left’, 0)
                        i = 1
                    }
                    if (i == -1) {
                        $(‘.banner .img’).css({ left: -(size – 1) * 520 })
                        i = size – 2
                    }
                    $(‘.img’)
                        .stop()
                        .animate({ left: -i * 520 }, 500)
                    if (i == size – 1) {
                        $(‘.num li’)
                            .eq(0)
                            .addClass(‘active’)
                            .siblings()
                            .removeClass(‘active’)
                    } else {
                        $(‘.num li’)
                            .eq(i)
                            .addClass(‘active’)
                            .siblings()
                            .removeClass(‘active’)
                    }
                }
                $(‘.banner .num li’).hover(function() {
                    var index = $(this).index()
                    i = index
                    $(‘.img’)
                        .stop()
                        .animate({ left: -i * 520 }, 500)
                    $(this)
                        .addClass(‘active’)
                        .siblings()
                        .removeClass(‘active’)
                })
                var timer = setInterval(function() {
                    i++
                    move()
                }, 2000)
                $(‘.banner’).hover(
                    function() {
                        clearInterval(timer)
                    },
                    function() {
                        timer = setInterval(function() {
                            i++
                            move()
                        }, 2000)
                    },
                )
            })
        </script>
    </body>
</html>
火狐前端开发插件
前端tree插件开发
sublime text 3 前端开发插件
» 本文来自:前端开发者 » 《淘宝无缝轮播图效果》
» 本文链接地址:https://www.rokub.com/8221.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
分享到: 更多 (0)

评论 抢沙发