这几天用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. SQL Server索引总结二

    从CREATE开始 通过显式的CREATE INDEX命令 在创建约束时作为隐含的对象 随约束创建的隐含索引 当向表中添加如下两种约束之一时,就会创建隐含索引. 主键约束(聚集索引) 唯一约束(唯一索 ...

  2. nginx搭建流媒体服务器

    1.安装PCRE库 到www.pcre.org 下载pcre-8.37.tar.gz tar -zxvf pcre-8.37.tar.gz cd pcre-8.37 ./configure make ...

  3. SwiftHN阅读器应用IOS源码

    SwiftHN是用Swift语言编写的Hacker News阅读器,同时采用了iOS 8最新的API. <ignore_js_op> <ignore_js_op> 详细说明:h ...

  4. 跑rbgirshick的fast-rcnn代码

    需要安装Caffe.pycaffe cython.python-opencv.easydict matlab(主要用于对PASCALvoc数据集的评估) 为什么要bulid cython.caffe. ...

  5. js转换时间戳成日期格式

    <script> function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().rep ...

  6. 使用dotnet-dump 查找 .net core 3.0 占用CPU 100%的原因

    公司的产品一直紧跟 .net core 3.0 preview 不断升级, 部署到 Linux 服务器后, 偶尔会出现某个进程CPU占用100%. 由于服务部署在云上, 不能使用远程调试; 在局域网内 ...

  7. 2017年9月11日 梁勇 java教材 编程练习题 第二章 2.15 键盘 读取两个点的坐标值（小数），控制台输出两点间距离。

    package com.swift; import java.util.Scanner; public class PToP { public static void main(String[] ar ...

  8. wepy框架构建小程序（1）

    wepy框架构建小程序(1) 基本操作: # 安装脚手架工具 npm install wepy-cli -g # 创建一个新的项目 npm init standard myproject # 进入新项 ...

  9. http 工作模式与模块

    目录 http 工作模式与模块 http 服务器应用 MPM工作模式 prefork worker event 进程角色 httpd功能特性 http 安装 centos6配置目录 http 2.2 ...

  10. PHP 对象基础知识

    最近开始重新学习对象知识,其实也算是初步深入学习对象和设计模式,希望自己会坚持下去,保持更新 初识PHP对象 还记得,刚开始学习 PHP 的时候,学到到方法和对象时有一个很大的疑问,对象与方法相比较那 ...