这几天用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下mysql多实例安装（转）

    转自:http://www.cnblogs.com/xuchenliang/p/6843990.html   1.MySQL多实例介绍 1.1.什么是MySQL多实例 MySQL多实例就是在一台机器上 ...

  2. Mvc重写JsonResult

    用了mvc有一段时间了,慢慢的熟悉起来了,也渐渐的发现了mvc的一些缺点,比如当我们返回 Json(new{})的时候没办法做到将首字母转换成小写.日期再序列化过后是时间戳需要到前台重新处理或者提在在 ...

  3. STL中的map和hash_map

    以下全部copy于:http://blog.chinaunix.net/uid-26548237-id-3800125.html 在网上看到有关STL中hash_map的文章,以及一些其他关于STL ...

  4. StackOverflow之旅<1>------{去掉烦人的"!=null"判断}

    问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc(); } 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何 ...

  5. OpenGL位图变形问题

    因为初次接触OpenGL,图形学也后悔当初在学校没有认真学,隐约记得教授当时讲过图像变形的问题,而且我的bitmap也是2的N次方:16*16的,在网络上找到的大多都是一句话:“视口的纵横比一般和视景 ...

  6. 302和VS启动后网站拒绝访问的解决方案

    网页状态302代表的是重定向的意思,就是网页跳转的一种状态 网站拒绝访问的时候可以在输出窗口查看是否有内容输出,如果没有说明启动网站的端口可能被占用,在网站项目——属性——web——项目中把地址的端口 ...

  7. 【POJ2774】Long Long Message（后缀数组求Height数组）

    点此看题面 大致题意: 求两个字符串中最长公共子串的长度. 关于后缀数组 关于\(Height\)数组的概念以及如何用后缀数组求\(Height\)数组详见这篇博客:后缀数组入门(二)--Height ...

  8. 求和VII

    问题 K: 求和VII 时间限制: 2 Sec  内存限制: 256 MB提交: 422  解决: 53[提交] [状态] [讨论版] [命题人:admin] 题目描述 master对树上的求和非常感 ...

  9. 2018.1.4 UML 第三章 用例图

    第三章 用例图 (1)参与者 是指系统以外的需要使用系统或与系统交互的外部实体,吧阔人.设备.外部系统等. (2)参与者之间的关系 泛化关系的含义是参与者的共同行为提取出来表示成通用行为,并描述成超类 ...

  10. NET_Framework_4.0installer.rar

    部署提示: 1.首先下载有关的安装程序 NET_Framework_4.0installer.rar 这是我整理好的四个软件(大致一共10MB),分别如下 WindowsInstaller-KB893 ...