<!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. STMPClient 发送邮件显示 不允许使用邮件名称.

      在.net 2.0,3.5, 针对某些邮箱(还不清楚是什么样的邮件) , 使用微软自带的DLL发送邮件会提示不允许使用邮件名称 .... 使用Jmail可以发送.     解决方案:     1. ...

  2. Spring.net Could not load type from string value

    最近有点懒了啊,都没有按时上来博客园更新下,个人觉得遇到难题的时候在这里留下脚印也亦造福他人,进来 晓镜水月 被项目围的团团转,asp.net MVC项目来的,但是我还是不务正业啊,在弄网络爬虫,这个 ...

  3. js中常用数组方法concat join push pop slice splice shift

    javascript给我们很多常用的 数组方法,极大方便了我们做程序.下面我们来介绍下常用的集中数组方法. 比如 concat() join() push() pop() unshift() shif ...

  4. remoting技术

    转: http://www.cnblogs.com/rickie/category/5082.html

  5. 常用的CSSreset整理

    说道CSSreset,大家又爱又恨,cssreset好处是,覆盖了浏览器的默认样式,使前端攻城狮能更加精确的添加样式,各个浏览器中的界面效果都相同.可是大量的.固定的CSSreset也给网页加载带来一 ...

  6. ios7 自定义UINavigationBar UIBarButtonItem 10px的偏移纠正

    为UINavigationBar 写一个分类.UINavigationItem+correct_offset.h  转载 http://www.colabug.com/thread-1112420-1 ...

  7. Codeforces Round #242 (Div. 2) C题

    题目链接:http://codeforces.com/contest/424/problem/C, 想来一个小时,就是做不出,都做出来了,悲剧! 分析:我们知道交换异或的顺序不影响答案! 然后就是求t ...

  8. PE文件结构

    PE头 typedef struct _IMAGE_NT_HEADERS { DWORD Signature; PE头标识 为固定的ascii码 PE\\ IMAGE_FILE_HEADER File ...

  9. eclipse 自动 注释

    在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Co ...

  10. STM32 对内部FLASH读写接口函数

    因为要用内部FLASH代替外部EEPROM,把参数放在STM32的0x08000000+320K处,其中20K是bootloader,300K是应用程序. 原理:先要把整页FLASH的内容搬到RAM中 ...