改版之轮播图

最新推荐文章于 2021-12-29 11:24:20 发布

王武顺

最新推荐文章于 2021-12-29 11:24:20 发布

阅读量244

点赞数

分类专栏： js常用例子文章标签： jq轮播图

本文链接：https://blog.csdn.net/wangwushun/article/details/52779280

版权

js常用例子专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div,
        ul,
        li {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;

            background: #ccc;
            font-size: 50px;
            color: #fff;
            line-height: 100px;
            text-align: center;
        }

        .warp {
            position: relative;
            width: 100px;
            margin: 0 auto;
            height: 100px;
            border: 1px solid red;
            /*overflow: hidden;*/
        }

        ul {
            position: absolute;
            top: 0;
            left: 0;

        }

        section {
            overflow: hidden;
        }

        section a {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: #5690D2;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        section .action {
            background: #FF0000;
        }
    </style>
</head>
<body>
<div class="warp">
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<section>
    <a href="#" class="action">a</a>
    <a href="#">a</a>
    <a href="#">a</a>
</section>
<input type="button" value="上一个" id="prev"/>
<input type="button" value="下一个" id="next"/>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        var $list = $('#list');
        var $warp = $('.warp');
        var $prev = $('#prev');
        var $next = $('#next');
        var $a = $('a');
        var iNow = 0;//轮播的下标
        var bok = true;//运动完才可再次运动
        var width = 0;

        $list.html($list.html() + $list.html());
        var $li = $list.find('li');
        $.each($list.find('li'), function () {
            width += parseInt($(this).css('width'));
        });
        $list.css('width', width);

        var $liw = width / $li.length;

        //下一个
        $next.click(function () {

            if (bok) {
                iNow++;
                //console.log(iNow);
                $list.stop().animate({'left': -$liw * iNow}, function () {
                    if (iNow == 3) {
                        $list.css({'left': 0});
                        iNow = 0;
                        $a.removeClass('action').eq(iNow).addClass('action');
                    } else {
                        $a.removeClass('action').eq(iNow).addClass('action');
                    }
                    bok = true;
                });
            }
            bok = false;
        });

        //上一个
        $prev.click(function () {
            if (bok) {
                iNow--;
                //console.log(-$liw*($li.length/2+1));
                if (iNow < 0) {
                    iNow = $li.length / 2 - 1;
                    $list.css({'left': -$liw * ($li.length / 2)});
                    $list.stop().animate({'left': -$liw * ($li.length / 2 - 1)}, function () {
                        $a.removeClass('action').eq(iNow).addClass('action');
                        bok = true;
                    });

                } else {
                    $list.stop().animate({'left': -$liw * iNow}, function () {
                        $a.removeClass('action').eq(iNow).addClass('action');
                        bok = true;
                    });
                }
                bok = false;
            }
        });

        //点击a
        $a.click(function () {
            iNow = $(this).index();
            //$a.removeClass('action').eq(iNow).addClass('action');
            $list.stop().animate({'left': -$liw * iNow}, function () {
                $a.removeClass('action').eq(iNow).addClass('action');
            });
        });

    });
</script>