<!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. iOS10推送必看UNNotificationServiceExtension

    转:http://www.cocoachina.com/ios/20161017/17769.html (收录供个人学习用) iOS10推送UNNotificationServic 招聘信息: 产品经 ...

  2. vi/vim编辑器

    vi / vim是Unix / Linux上最常用的文本编辑器而且功能非常强大.

  3. MDI窗体 的再度思考

    早在敲学生管理系统的时候,青山师哥就跟我说过  MDI 窗体 跟 子窗体的事情,当时只是简单的查询.小小的用了一下,没有太在意. 当再次面对着这个东西更深层的时候才想起师哥那句话.“好好研究一下这个东 ...

  4. c语言编写的日历

    输入年份如2013,显示2013年的日历. 思路: 1.查找每个月1号是星期几(这里利用了1990年1月1号是星期一) 计算年份如2013年1月1号到1990年1月1号有Days天,Day%7得到星期 ...

  5. STL之map

    参见http://www.cplusplus.com/reference/map/map/ template < class Key,                               ...

  6. 水王ID

    题目: 三人行设计了一个灌水论坛.信息学院的学生都喜欢在上面交流灌水,传说在论坛上有一个“水王”,他不但喜欢发帖,还会回复其他ID发的每个帖子.坊间风闻该“水王”发帖数目超过了帖子数目的一半. 如果你 ...

  7. token验证-微信公众平台开发3（asp.net）

    童鞋们直接看代码吧:(我这里是ashx处理程序写的类,开发过网站的一般都知道) <%@ WebHandler Language="C#" class="weixin ...

  8. Softnet_data

    Softnet_data的初始化: 每个CPU的softnet_data是在net_dev_init中初始化的,代码如下: "/net/core/dev.c" "stat ...

  9. 01.FastDFS的安装部署

    1.FastDFS简介 (1)FastDFS的功能介绍 FastDFS是一个开源的分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负 ...

  10. 【Android】cocos2d-x-3.1.1环境搭建与创建工程( Win7 32位系统)

    参考资料: http://blog.csdn.net/wxc237786026/article/details/32907079 1.环境搭建 2.创建工程 2.1 VS2012运行 2.2 Andr ...