<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <title></title>

    <style type="text/css">

    #slideBox{ width: 100%; height: 540px; overflow:hidden;position: relative;}

    ul,li{padding: 0; margin: 0; width: 100%;}

    li{ list-style: none;}

    .slideImg{ height: 500px; overflow: hidden; position: relative;}

    .slideImg li{position: absolute;}

    .slideBtn{ position: absolute; bottom: 0;left: 30%;}

    .slideBtn li{ display: block;float: left; cursor: pointer; width: 100px;height: 40px;background-color: #f60; border-right: 1px solid #fff;}

    .slideBtn li.active{ background-color: #f00}

    </style>

    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    ;(function($){

        $.fn.slideCom=function(options){

            var options=$.extend(this,options), i=0,timer;

           this.each(function(){

            var _this=$(this),

                   slideImg=_this.find(options.slideImg),

                   slideBtn=_this.find(options.slideBtn);

                    timer=setInterval(slideImgFun,options.times);

                     _this.hover(function(){

                        clearInterval(timer);

                   },function(){

                        timer=setInterval(slideImgFun,options.times);

                   });

                  var slideImgFun=function(){

                        i+=1;

                        if(i==options.slideLength){i=0};

                        var lie=slideImg.eq(i);

                        lie.siblings().css("z-index",2);

                        lie.css("z-index",3).animate({"opacity":1},150,function(){

                            lie.siblings().css({"opacity":0.1,"z-index":1});

                        })

                        slideBtn.eq(i).addClass(options.elemClass).siblings().removeClass(options.elemClass);

                };

           　　slideBtn.on(options.elemType,function(){

               　　 slideBtn.removeClass(options.elemClass);

                　　$(this).addClass(options.elemClass);

                　　i=$(this).index()-1;

                　　slideImgFun();

               　　 return false;

            })

           return this;

        })

        }

    })(jQuery);

    $(function()

    {

        $("#slideBox").slideCom({

            slideImg:".slideImg li",

            slideBtn:".slideBtn li",

            elemClass:"active",

            elemType:"click",

            times:3000,

            slideLength:$("#slideBox .slideImg li").length

        })

    })

    </script>

</head>

<body>

<div id="slideBox">

    <ul class="slideImg">

        <li  style="z-index: 3;opacity: 1;"> <a href="#" target="_blank" title="" ><img src="data:images/1.jpg" alt=""  /></a></li>

        <li> <a href="#" target="_blank" title="" style=""><img src="data:images/2.jpg" alt="" /></a></li>

        <li> <a href="#" target="_blank" title="" style=""><img src="data:images/3.jpg" alt="" /></a></li>

        <li> <a href="#" target="_blank" title="" style=""><img src="data:images/4.jpg" alt="" /></a></li>

    </ul>

     <ul class="slideBtn">

        <li class="active"></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

</html>

jquery自己写的幻灯片插件，好用不解释的更多相关文章

  1. jQuery幻灯片插件autoPic

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

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

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

  3. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  4. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  5. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  8. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  9. 学会自己写jQuery插件（二）---自己写的tab插件

    通过上一个基础篇我们知道插件的格式,这次我来写一个tab插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event ...

随机推荐

  1. Directx11教程(66) D3D11屏幕文本输出(1)

    原文:Directx11教程(66) D3D11屏幕文本输出(1)      在D3D10中,通过ID3DX10Font接口对象,我们可以方便的在屏幕上输出文字信息,一个DrawText函数就能解决所 ...

  2. Directx11教程(13) D3D11管线(1)

    原文:Directx11教程(13) D3D11管线(1)       从本篇教程开始,我们暂停代码的学习,先来了解一下D3D11的管线,这些管线不涉及具体的硬件,而是着重于理解能够支持D3D11的管 ...

  3. 聊聊jdk http的HeaderFilter

    序 本文主要研究一下jdk http的HeaderFilter. FilterFactory java.net.http/jdk/internal/net/http/FilterFactory.jav ...

  4. js中+号强制转换小例子

    1 <script> console.log(([]+{}).length); </script> </head> 输出竟然是: 为什么会是15呢? 因为在+号的强 ...

  5. oracle 创建新表，并复制旧表数据

    需求 备份数据,用于恢复. 语法规则 CREATE TABLE NEW_TAB AS SELECT * FROM OLD_TAB WHERE 1=1; 或者 CREATE TABLE NEW_TAB ...

  6. “不是不需要运维工程师，是人人皆是运维”|对话阿里云MVP蒋烁淼（上）

    摘要: 与湖畔大学首期学员.阿里云MVP.驻云创始人蒋烁淼面对面 [三位阿里云MVP(驻云CEO.首席架构师.大数据总监)<MVP时间>首次同台授课,“湖畔第一大脑” 蒋烁淼领头线上精讲, ...

  7. js 获取js自身参数

    页面中有<script id="comjs" src="js/common.js?cname=mad&cid=500&uid=smpx"& ...

  8. js+canvas 一只一担小游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. auto uninstaller密钥激活码破解注册机ver 8.8.58

    auto uninstaller密钥破解注册机ver 8.8.58 楼主分享几个auto uninstaller密钥破解注册机,可以用于auto uninstaller 8.8.58 .因为每个版本的 ...

  10. 2019-8-31-dotnet-通过-WMI-获取系统补丁

    title author date CreateTime categories dotnet 通过 WMI 获取系统补丁 lindexi 2019-08-31 16:55:59 +0800 2019- ...