jquery实现轮播插件

这几天用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实现轮播插件

上一篇:jquery 中fadeIn,fadeOut动画


下一篇:冷门JS技巧