<!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. Mac下搭建python开发环境

    目录 1. 安装brew 2. 安装 mysql 3. 安装 pycharm 4. 安装python3.6 5. 安装virtualenvwrapper 6. 虚拟环境下安装mysqlclient 1 ...

  2. WPF TextBox提示文字设定

    WPF TextBox框提示文字,鼠标划入提示文字消失 <TextBox Width=" VerticalContentAlignment="Center" Bor ...

  3. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  4. nodeJs学习-08 cookie、session

    http-无状态的:两次访问之间,无区别,cookie可解决 cookie:在浏览器保存一些数据,每次请求都会带过来: 弊端:可以查看修改,并不安全.大小有限(4K) 读取--cookie-parse ...

  5. C++:for范围循环特点--自我理解

    for(declaration : expression)statement for(xx-type i : P)....其一:for范围类型循环在循环前,可能会对p所在的队列里,对每一个对象进行一次 ...

  6. iOS 万能跳转界面方法 (runtime实用篇一)

    http://www.cocoachina.com/ios/20150824/13104.html 作者:汉斯哈哈哈 授权本站转载. 在开发项目中,会有这样变态的需求: 推送:根据服务端推送过来的数据 ...

  7. ASO优化经验：APP关键字优化的技巧

    当开发首款产品的时候,可能你根本连ASO是什么都不知道,因为有太多别的事情需要你做.大多数新手开发商甚至到游戏要进入Appstore的时候才知道有“关键字”这件事要去研究.正因为这些开发商几乎没有在关 ...

  8. phpexcel使用说明3

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  9. 微信小程序入门到实战(1)-基础知识

    1.微信小程序介绍 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. 1.1. 为什么是微信 ...

  10. 05Dockerfile简介

    Dockerfile是一个用于构建Docker镜像的文本文件,其中包含了创建Docker镜像的全部指令.基于这些指令,可以使用"docker  build"命令来创建镜像. 一:用 ...