这几天用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. linux 命令——14 head (转）

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 1．命令格式: hea ...

  2. php之header的不同用法

    1.header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端. header(string,replace,http_response_code) /*string ...

  3. 1.VS Code 开发C#入门 安装Dotnet core

    1. dot.net  网站 下载 .NET Core 1.0  (https://www.microsoft.com/net/download/core) 2. 打开命名提示符: 3.dotnet ...

  4. 【转】转自微信公众号 JavaScript 复杂判断的更优雅写法

    与微信公众号看到一篇js复杂判断的文章,对我启发很大,故转到博客园以供后期不断学习并应用于项目.原文地址:https://mp.weixin.qq.com/s/ClFDRj4MnAxv1dJ5VWKS ...

  5. JoinQuant策略代码示例

    总体回测前 ''' ================================================================================ 总体回测前 === ...

  6. 通过cmd查看环境变量名对应的环境变量值

    在VS环境中通常要添加路径,不过基本都是按照往上提供的方法添加变量名形如:$(VC_IncludePath),但是如何通过cmd命令找到真正的路径呢 未完待续……

  7. 零基础快速入门SpringBoot2.0教程 （二）

    一.SpringBoot2.x使用Dev-tool热部署 简介:介绍什么是热部署,使用springboot结合dev-tool工具,快速加载启动应用 官方地址:https://docs.spring. ...

  8. c++ 循环程序的作业，2017年10月10日作业题。

    作业1: 需求:输出一个由 * 符号所组成的矩形,要求每行有50个 * ,一共需要有60行.使用双重for循环完成. 作业2: 需求:输出一个由 * 符号所组成的三角形,要求第一行一个 * ,第二行 ...

  9. 使用IP地址方法登录MySQL数据库Can't connect to MySQL server的原因。mysql -h 192.168.1.104 -P3306 -uroot -p 失败

    mysql -h 192.168.1.104 -P3306 -uroot -p 然后输入你安装时设置的MySQL密码 发现Can't connect to MySQL server 你的IP 解决方法 ...

  10. 32-1题：不分行从上到下打印二叉树/BFS/deque/queue

    题目 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 考点 1.广度优先遍历 2.binary tree 3.queue 4.deque 思路 按层打印:8.6.10.5.7.9.11 用ST ...