这几天用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. LeetCode Missing Number （简单题）

    题意: 给一个含有n个整数的数组,数组中的元素应该是0-n.现在缺了其中某1个,找出缺少的那个整数? 思路: 0-n的总和是可以直接计算的,而缺少的那个就是sum减去数组的和. int missing ...

  2. IOS UITextFieldDelegate (常用的代理方法)

    #pragma mark - UITextFieldDelegate // 返回NO代表着文本输入框不可以改变(不可以编辑) - (BOOL)textField:(UITextField *)text ...

  3. 简析平衡树（二）——Treap

    前言 学完了替罪羊树,我决定再去学一学\(Treap\).一直听说\(Treap\)很难,我也花了挺久才学会. 简介 \(Treap\)这个名字真的挺有内涵: \(\color{red}{Tree}\ ...

  4. python_17_数据运算

    #//取整除,返回商的整数部分 print(9//2) print(10/3.3) print(10//3.0) #<>与!=都为不等于 #and 与 例(a and b) #or 或 # ...

  5. Quartz 配置文件属性

    主要配置 Property Name Req'd Type Default Value org.quartz.scheduler.instanceName no string 'QuartzSched ...

  6. java基础编程——树的子结构

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 题目代码 /** * 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一 ...

  7. C#的接口基础教程之六 接口转换

    C#中不仅支持.Net 平台,而且支持COM平台.为了支持 COM和.Net,C# 包含一种称为属性的独特语言特性.一个属性实际上就是一个 C# 类,它通过修饰源代码来提供元信息.属性使 C# 能够支 ...

  8. C盘扩展卷是灰色的扩容方法

    当想要扩容C盘的时候可能会发现C盘的扩展卷竟然是灰色的.原因是C盘旁边没有紧挨着的“”未分配空间“”, 只要将D盘的空间分出一些来就可以了. !!!磁盘的分区合并有风险,重要文件等记得先备份  !!! ...

  9. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. zabbix 密码忘记了如何恢复

    1.进入数据库 2.使用zabbix的数据库 use zabbix: 3.查看表信息 show tables; 4.搜索users表 select * from users; 5.修改userid为1 ...