<!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. 11.3Daily Scrum

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频上传的功能,研究相关的代码782 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.783 实现视频浏览的功能 王宇杰 负 ...

  2. VS2013 IIS Express 添加MIME映射

    VS2013,则可以直接在IIS Express中添加MIME映射.操作如下: 1.在DOS窗口下进入IIS Express安装目录,默认是“C:\Program Files\IIS Express” ...

  3. C#制作高仿360安全卫士窗体（四）- 水晶按钮

    项目越来越紧,我也乐此不疲.自从上次C#制作高仿360安全卫士窗体(三)出来之后,就开始有一些人在说为什么还在坚持写这么落后的东西.我想说的是,我是从事企业信息化工作的,所有程序都只对内部使用.所以只 ...

  4. SQL SERVER数据库修改是否区分大小写

    昨天去客户,发现程序无法应用,跟踪错误提示,提示的大致意思是“数据库表名和数据库字段名不存在”.查询后发现是SQL Server数据库设置了区分大小写的缘故(一般安装时,Oracle的正确安装下是默认 ...

  5. Android:apk文件结构

    Android apk文件,即Android application package文件. 每个要安装到Android平台的应用都要被编译打包为一个单独的文件,后缀名为.apk,其中包含了应用的二进制 ...

  6. 堆(heap)和栈(stack)的区别

    转: 一.预备知识―程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)― 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中 ...

  7. 项目分析(channelid是如果产生的)

    channelid如何生成的 /////////////////////////////////////////////////////////////// // // I_TCPServer.h / ...

  8. byte和hexstring,int，string等的转换类

    public class HexConversion { /** * 16进制数的字符串转字节数组(16进制转字节数组) * * @param hexString * 16进制字符串 * @retur ...

  9. Java递归列出目录下全部文件

    Java递归列出目录下全部文件 /** * 列出指定目录的全部内容 * */ import java.io.*; class hello{ public static void main(String ...

  10. 20+个可重复使用的jQuery代码片段

    jQuery已经成为任何web项目的重要组成部分.它为网站提供了交互性的通过移动HTML元素,创建自定义动画,处理事件,选择DOM元素,检索整个document ,让最终用户有一个更好的体验. 在这篇 ...