<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="Author" content="博客名：仙梦之飘  QQ:894547549">

<meta name="Keywords" content="">

<meta name="Description" content="">

<head>

<title>幻灯片插件制作</title>

<style type="text/css">

*{margin: 0;padding: 0;}

.wrap{ width:800px; margin:0 auto;}

.slider{width: 400px;height: 300px; position: relative;margin: 10px auto;overflow: hidden;border:2px #c0c9cf solid;}

.slider_pic li{width:400px;height: 300px;font:700 40px/300px "微软雅黑";text-align: center;color: #fff;list-style: none;}

.num{width: 160px;position: absolute;right: 10px;bottom: 10px; z-index:10;}

.num span{display: inline-block;color:#fff;font-weight:bold;cursor:pointer;margin-right: 5px;background: #db7093;width: 24px;height: 24px;text-align: center;line-height: 24px;border-radius: 10px;}

.num span.cur{background:#000;}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>

//jq 的easing效果添加，可以选择需要的效果来添加

jQuery.extend(jQuery.easing,{

    easeOutBounce: function (x, t, b, c, d) {

        if ((t/=d) < (1/2.75)) {

            return c*(7.5625*t*t) + b;

        } else if (t < (2/2.75)) {

            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

        } else if (t < (2.5/2.75)) {

            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

        } else {

            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

        }

    }

});

(function($){

        $.fn.extend({

            mySlider:function(options){

                var that=$(this);

                var configs={

                    'slideCon':"ul",//容器

                    'slideTag':"li",//图片

                    'direction': 'vertical',//切换效果

                    'method'   : 'click',//鼠标事件

                    'speed'    : 5000 ,//切换时间

                    'animateSpeed':600,//运动速度

                    'auto':true//自动播放

                };

                options= $.extend(configs,options);

                var slide=that.find(configs.slideCon);

                var oLi=slide.find(configs.slideTag);

                var oLen=oLi.length;

                var oWidth=oLi.width();

                var oHeight=oLi.height();

                var oNum=$("<div class='num'></div>");

                var iTimer=null;

                var index=0;

                var peel = 0;

                for(var i=0;i<oLen;i++){

                    oNum.append('<span>'+(i+1)+'</span>');

                }

                slide.css({

                    'position': 'absolute',

                    'top'     : '0',

                    'left'    : '0'

                });

                that.append(oNum);

                var oSpan=oNum.find('span');

                oSpan.eq(0).addClass("cur");

                 function SlideImg(n){

                    switch(options.direction){

                        case  'vertical':

                            peel=parseInt(n * oHeight);

                            slide.stop(true,false).animate({'top':-peel},configs.animateSpeed,"easeOutBounce");

                            break;

                        case 'horizontal':

                            oLi.css('float', 'left');

                            peel=parseInt(n*oWidth);

                            slide.css({width:oLen*parseInt(oWidth)}).stop(true,false).animate({'left':-peel},configs.animateSpeed,"easeOutBounce");

                            break;

                        case 'none':

                            oLi.hide().eq(n).show();

                            break;

                        case 'fade':

						     oLi.css({

								   'position': 'absolute',

									'top'     : '0',

									'left'    : '0'

								   })

                             oLi.stop(true,false).animate({opacity: 0}, 800).css('z-index',1).eq(n).css('z-index',9).stop(true,false).animate({opacity: 1}, 800);

                            break;

                    }

                     oSpan.removeClass("cur").eq(n).addClass("cur");

                }

                if(configs.auto){

                    autoPlay();

                }

                function autoPlay(){

                  iTimer=setInterval(function(){

                        SlideImg(index);

                        index++;

                        if(index==oLen){

                            index=0;

                        }

                    },configs.speed);

                }

               that.hover(function(){

                    clearInterval(iTimer);

                },function(){

                  if(configs.auto){ autoPlay();}

                });

               oSpan.bind(options.method,function(){

                 if(configs.auto){clearInterval(iTimer);}

                 index=oSpan.index(this);

                 SlideImg(index);

               });

                        return this;

            }

        })

    })(jQuery);

    $(function(){

        $('#slider').mySlider({

          'direction': 'vertical',

          'method'   : 'mouseenter',

          'speed'    : 2000

        });

        $('#slider2').mySlider({

          'direction': 'fade',

          'slideCon':"ol",

		  'method'   : 'mouseenter',

          'speed'    : 3000

        });

        $('#slider3').mySlider({

          'direction': 'horizontal',

          'method'   : 'mouseenter',

          'slideCon':"ol",

          'speed'    : 3000

        });

        $('#slider4').mySlider({

          'direction': 'none',

          'method'   : 'mouseenter',

          'slideCon':"ol",

          'speed'    : 3000

        });

    })

</script>

</head>

<body>

<div class="wrap">

<code>   $('#slider').mySlider({

          'slideCon':"ul",//默认容器，可以选择自己需要的<br>

          'slideTag':"li",//默认图片切换标签元素，可以选择自己需要的<br>

          'direction': 'vertical', //默认是垂直方向，总共有4种vertical，horizontal，fade，none<br>

          'method'   : 'mouseenter',//默认是点击事件，根据自己需要的事件来填click，mouseenter<br>

          'speed'    : 2000 , //默认是切换时间5000<br>

          'animateSpeed':600,//运动速度<br>

          'auto':true//默认自动播放，不自动播放的值，false<br>

          如果是设置fade效果按钮是在图片上面的需要设置.num的z-index：10以上的数值

        });

</code>

  <h1>滚动垂直方向效果</h1>

  <div class="slider" id="slider">

    <div class="slider_pic">

      <ul>

        <li style="background: #228b22">1</li>

          <li style="background:#4169e1">2</li>

          <li style="background: #ffc0cb">3</li>

          <li style="background: #daa520">4</li>

        </ul>

         </div>

   </div>

  <h1>渐变效果效果</h1>

  <div class="slider" id="slider2">

    <div class="slider_pic">

      <ol>

        <li style="background: #228b22">1</li>

          <li style="background:#4169e1">2</li>

          <li style="background: #ffc0cb">3</li>

          <li style="background: #daa520">4</li>

        </ol>

        </div>

   </div>

  <h1>滚动水平方向效果</h1>

  <div class="slider" id="slider3">

    <div class="slider_pic">

      <ol>

        <li style="background: #228b22">1</li>

          <li style="background:#4169e1">2</li>

          <li style="background: #ffc0cb">3</li>

          <li style="background: #daa520">4</li>

        </ol>

     </div>

   </div>

  <h1>切换方向效果</h1>

  <div class="slider" id="slider4">

    <div class="slider_pic">

      <ol>

        <li style="background: #228b22">1</li>

          <li style="background:#4169e1">2</li>

          <li style="background: #ffc0cb">3</li>

          <li style="background: #daa520">4</li>

        </ol>

     </div>

   </div>

</div>

</body>

</html>

jq 幻灯片插件制作的更多相关文章

  1. jq原创幻灯片插件slideV1.0

    jq各种插件层出不穷,当然幻灯片插件也不例外,于是本人也自已写了一款,对于目前所做项目来说,足够用了,slideV1.0插件使用很简单,配置如下: 1.三种按钮类型接口选择(默认类型.数字类型.缩略图 ...

  2. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  3. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  4. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

  5. 支持移动触摸设备的简洁js幻灯片插件

    lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jQuery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easin ...

  6. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  7. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  8. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

随机推荐

  1. QT 按钮类继承处理带定时器

    01.class KeyButton : public QPushButton  02.{  03.    Q_OBJECT  04.public:  05.    explicit KeyButto ...

  2. SPA examples

    http://webdesignledger.com/inspiration/40-excellent-examples-of-single-page-websites https://onepage ...

  3. STL之multimap

    参见http://www.cplusplus.com/reference/map/multimap/ 多重映射multimap和map映射很相似,但是multimap允许重复的关键字,这使得multi ...

  4. VS2010在C#头文件中添加文件注释的方法

    步骤: 1.VS2010 中找到安装盘符(本人安装目录在D盘,所以以D盘为例)D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\I ...

  5. 软件工程随堂小作业——随机四则运算Ⅱ之算法思路（C++）

    1.题目避免重复: (1)利用系统时间来产生随机数,重复率会降低. (2)建立链表,逐个判断.可读取写入文件. 2.可定制(数量/打印方式): (1)格式有默认值; (2)可以选择重新设置分几列和每行 ...

  6. 封装getByClass

    方法一:(普通版),获取单一的class: function getByClass(oParent, sClass) { var aResult = []; var aEle = oParent.ge ...

  7. Careercup - Google面试题 - 5680330589601792

    2014-05-08 23:18 题目链接 原题: If you have data coming in rapid succession what is the best way of dealin ...

  8. Android本地服务

    一.服务生命周期总结 (一).单独开启服务,并没有绑定服务Activity中调用startService(),服务的lifecycle:onCreate()→onStartCommand()→onSt ...

  9. NSStream

    NSStream 流是位数据通过通信路径的连续传送序列.它是单向的,从一个应用程序的角度,流可以是输入流(读操作流)或者输出流(写操作流),除了基于文件的流之外,其余的都是non-seekable的. ...

  10. 在线运行HTML代码器

    在线运行HTML代码器(二)和前面的(一)大同小异,关键部分为JS代码,这次是把运行器所有的JS功能集中放在一起.以下为HTML代码: <!DOCTYPE html PUBLIC "- ...