jquery实现轮播插件

2022-09-28 14:03:41
这几天用jquery写了两个轮播的插件，功能很简单。第一次尝试写插件，有很多不足的地方，代码如下：
注：图片链接请替换掉，配置信息必须加上图片width和height。
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>轮播动画</title>
    <style type="text/css">
        .marquee-wrap {
            overflow: hidden;
            margin: 0 auto;
            position: relative;
            top: 0;
            left: 0;
        }

        .indicator {
            list-style: none;
            position: absolute;
            right: 60px;
            bottom: 4px;
            z-index: 102;
        }

        .indicator li {
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            background-color: #ffffff;
            text-align: center;
            margin: 2px;
        }

        .indicator li a {
            color: #333;
            text-decoration: none;
        }

        .indicator li.active {
            background-color: rgb(255, 157, 51);
        }

        .indicator li.active a {
            color: #ffffff;
        }

        .operator {
            width: 100%;
            padding: 0 16px;
            position: absolute;
            top: 40%;
            left: 0;
            z-index: 101;
        }

        .operator a {
            font-size: 26px;
            text-decoration: none;
            color: #ffffff;
            font-weight: 200;
        }

        .operator a:hover {
            opacity: 0.9;
        }

        .marquee {
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
            top: 0;
            z-index: 99;
        }

        ul.marquee:after, ol.indicator:after, .operate:after {
            display: block;
            content: ".";
            visibility: hidden;
            height: 0;
            clear: both;
            *zoom: 1;
        }

        .marquee li {
            float: right;
        }

        .my-marquee-wrap {
            overflow: hidden;
            margin: 20px auto;
        }

        .my-marquee {
            position: relative;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
        }

        .my-marquee li {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }


    </style>
</head>
<body>

<div class="marquee-wrap" id="marquee">
    <ol class="indicator">
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ol>
    <ul class="marquee">
        <li>
            <a href="#" target="_blank">
                <img src="images/banner2.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner5.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner9.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner10.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner11.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner12.jpg">
            </a>
        </li>
    </ul>
    <div class="operator">
        <a href="#" class="next pull-right"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <a href="#" class="prev pull-left"><span class="glyphicon glyphicon-chevron-left"></span></a>
    </div>

</div>

<div class="my-marquee-wrap" id="my-marquee">
    <ul class="my-marquee">
        <li>
            <a href="#" target="_blank">
                <img src="images/banner2.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner5.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner9.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner10.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner11.jpg">
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <img src="images/banner12.jpg">
            </a>
        </li>
    </ul>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>

    (function ($) {

        $.fn.slide = function (options) {

            this.defaults={
                slideDuration:2000,
                animateDuration:4000
            };

            var settings= $.extend({},this.defaults,options);

            return this.each(function () {

                var $marquee = $(this).children(‘.marquee‘);
                var $indicator = $(this).children(‘.indicator‘);
                var $operator = $(this).children(‘.operator‘);

                if(typeof settings.width!=‘undefined‘ && typeof settings.height!=‘undefined‘){
                    $(this).css({
                        width:settings.width,
                        height:settings.height
                    });
                    $marquee.css({
                        width:parseInt(settings.width)*3,
                        height:settings.height,
                        right:settings.width
                    });

                }

                var index= 0,interval="";

                init();

                function init(){
                    interval=window.setInterval(slide,settings.animateDuration);
                }

                function slide() {

                    $marquee.find(‘li‘).eq(0).animate({
                        opacity: 0,
                        width: 0
                    }, settings.slideDuration, function () {
                        index = index + 1 > 5 ? 0 : index + 1;

                        $indicator.find(‘li‘).eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
                        $marquee.find(‘li‘).eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee);
                    });
                }

                $indicator.find(‘a‘).on(‘click‘, function (event) {
                    event.preventDefault();
                    clearInterval(interval);
                    var current = index;
                    index = $(this).text() - 1;
                    var temp = Math.abs(current - index);
                    if (current == index) {
                        return false;
                    }
                    else {
                        //修改循环队列
                        for (var i = 0; i < temp; i++) {

                            if (current < index) {
                                $marquee.find(‘li‘).eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee);
                            }
                            else {
                                $marquee.find(‘li‘).last().css({opacity: 1, width: settings.width}).prependTo($marquee);
                            }
                        }
                    }
                    $indicator.find(‘li‘).eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);

                    interval = window.setInterval(slide, settings.animateDuration);
                });

                $operator.find(‘.next‘).on(‘click‘, function (event) {

                    event.preventDefault();
                    clearInterval(interval);
                    $marquee.find(‘li‘).eq(0).animate({
                        opacity: 0,
                        width: 0
                    }, 600, function () {
                        index = index + 1 > 5 ? 0 : index + 1;

                        $indicator.find(‘li‘).eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
                        $marquee.find(‘li‘).eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee);

                    });
                    interval = window.setInterval(slide, settings.animateDuration);

                });
                $operator.find(‘.prev‘).on(‘click‘, function (event) {

                    event.preventDefault();
                    clearInterval(interval);
                    $marquee.find(‘li‘).last().css({opacity: 0, width: "0"}).prependTo($marquee);

                    $marquee.find(‘li‘).eq(0).animate({
                        opacity: 1,
                        width: settings.width
                    }, 600, function () {
                        index = index - 1 < 0 ? 5 : index - 1;
                        $indicator.find(‘li‘).eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
                    });

                    interval = window.setInterval(slide, settings.animateDuration);

                });

            });


        };

    })(jQuery);

    (function($){

        $.fn.marquee=function(options){

            this.defaults={
                slideDuration:1500,
                animateDuration:1000
            };

            var settings= $.extend({},this.defaults,options);

            return this.each(function () {

                var $marquee=$(this).children(‘.my-marquee‘);
                var interval="";

                if(typeof settings.width!=‘undefined‘ && typeof settings.height!=‘undefined‘){
                    $(this).css({
                        width:settings.width,
                        height:settings.height
                    });
                }
                init();

                function init(){
                    interval = window.setInterval(slide, settings.animateDuration);
                }

                function slide(){
                    $marquee.find(‘li‘).last().fadeOut(settings.slideDuration,function(){
                        $(this).show().prependTo($marquee);
                    })
                }

            });

        };
    })(jQuery);


    $(function () {

        $(‘#marquee‘).slide({
            width:‘1200px‘,
            height:‘330px‘
        });

        $(‘#my-marquee‘).marquee({
            width:‘1200px‘,
            height:‘330px‘
        });

    });

</script>
</body>
</html>
jquery实现轮播插件,布布扣,bubuko.com
jquery实现轮播插件
码农公寓

相关文章
