<!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. Web中Listener的创建

    使用Listener只需要两个步骤: 定义Listener实现类. 通过Annotation或在web.xml文件中配置Listener 实现Listener类 监听不同Web事件的监听器不相同,常用 ...

  2. tcp传输黏包

    tcp传输黏包 tcpip协议使用"流式"(套接字)进行数据的传输,就是说它保证数据的可达以及数据抵达的顺序,但并不保证数据是否在你接收的时候就到达,特别是为了提高效率,充分利用带 ...

  3. C语言中链表节点的实现,以及如何实现泛型

    1.C语言中的struct是纯粹的结构体,没有访问权限的概念 2.C语言中用void* 来实现泛型编程,也是C++类和模板底层实现的基础,就是用void*来实现的 #include<stdio. ...

  4. C++中数组求偏移量计算公式

    已知数组:type A[10][5]A[0][0] --A[8][4]面试常考:数组定义A[0....x][0...y]已知A[m][n] --求A[k][l]的地址:    &A[m][n] ...

  5. 基于.net mvc的校友录（七、文件上传以及多对多关系表的LINQ查询实现）

    图片的上传与调用 图片的上传就是文件的上传,在前台使用的是type="file"的input,但是,要将表单声明为multipart/form-data模式,方法是在BeginFo ...

  6. “我爱淘”冲刺阶段Scrum站立会议10

    完成任务: 完成了webservice的配置与测试,可以将数据库中的内容解析出来. 计划任务: 在客户端通过查询可以得到想要的书籍内容. 遇到问题: 客户端的内容获取还没有实现.

  7. maven安装报错

    今天在安装maven时安照说明配置环境变量,通过命令检查: mvn -v 竟然出现以下错误,很郁闷的是我明明配置了JAVA_HOME,并且别的依赖java的东西都能用,通过java -version也 ...

  8. 常见的百度蜘蛛IP

    根据不同的IP我们可以分析网站是个怎样的状态, 以下常见的百度蜘蛛IP: 123.125.68.*这个蜘蛛经常来,别的来的少,表示网站可能要进入沙盒了,或被者降权. 220.181.68.*每天这个I ...

  9. 前端之JavaScript第二天学习(5)-JavaScript-语句

    JavaScript 语句 JavaScript 语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. 下面的 JavaScript 语句向 id="demo" 的 HTML ...

  10. Codeforces Round #281 (Div. 2)

    题目链接:http://codeforces.com/contest/493 A. Vasya and Football Vasya has started watching football gam ...