这几天用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="data:images/banner2.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner5.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner9.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner10.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner11.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data: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="data:images/banner2.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner5.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner9.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner10.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data:images/banner11.jpg">

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <img src="data: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实现轮播插件的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  4. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  6. jquery图片轮播-插件

    更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...

  7. jquery flexslider 轮播插件

    去官网下载最新的 https://www.woothemes.com/flexslider/ 引入 css 和 js api $(window).load(function() { $('.flexs ...

  8. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. 12款 jquery轮播插件

    Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...

随机推荐

  1. Shape详解

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  2. unity中的动画制作方法

    Unity中的动画制作方法 1.DOTween DoTween在5.0版本中已经用到了,到官网下载好插件之后,然后通过在项目中导入头using DG.Tweening;即可. 一些常用的API函数 D ...

  3. Python学习-用户输入和字符串拼接

      用户输入和字符串拼接 #用户输入和字符串拼接username=input("username:")age=int(input("Age:")) #转换整数型 ...

  4. php-7.1.11编译选项配置

    ./configure \ --prefix=/usr/local/php-7.1.11 \ --with-config-file-path=/usr/local/php7.1.11/etc \ -- ...

  5. 华为服务器操作系统EulerOS V2.0

    平台: linux 类型: 虚拟机镜像 软件包: java-1.8.0 php-5.4.16 python-2.7.5 qt-4.8.5 tomcat-7.0.69 basic software eu ...

  6. http请求各种数据的接受

    一.接受请求的http数据 1.接受客户请求的数据,例如xml数据格式,代码如下: 此代码相当于服务端 public String analyzeWeixinXMLStr(HttpServletReq ...

  7. java中list强转为map类型

    起因:读取数据库文件的测试用例,测试用例需要存放到一个map中,方便下次调用, 读取的内容返回的内容存放在一个list中,并且数据内容是key=value的形式,最开始使用切片方式,做了很多无用功,后 ...

  8. python剑指offer 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). # -*- coding:utf-8 -*- class Solution: def ...

  9. dubbo + zookeeper 配置

      Dubbo与Zookeeper.SpringMVC整合和使用 windows环境介绍: myeclipse 10 jdk1.6 tomcat 6.0.35 一.安装Zookeeper 1.通过链接 ...

  10. PAT (Advanced Level) Practise - 1094. The Largest Generation (25)

    http://www.patest.cn/contests/pat-a-practise/1094 A family hierarchy is usually presented by a pedig ...