<!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}

    .leftRight{ position: absolute; width: 100%; top: 230px; z-index: 100}

    .leftBtn{ float: left; color: #f00;}

    .rightBtn{ float: right;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),

                   leftBtn=_this.find(options.leftBtn),

                   rightBtn=_this.find(options.rightBtn);

                    timer=setInterval(slideImgFun,options.times);

                     _this.hover(function(){

                        clearInterval(timer);

                   },function(){

                        timer=setInterval(slideImgFun,options.times);

                   });

                  var slideImgFun=function(){

                            if(i==-2){i=options.slideLength-2}//重点注意

                             i+=1

                            if (i>=options.slideLength) {

                                i=0;

                            } else if (i<0) {

                                i=options.slideLength;

                            }

                        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;

                })

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

                    i-=2;

                    slideImgFun();

                     return false;

               })

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

                    i+=0;

                    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,

            leftBtn:".leftBtn",

            rightBtn:".rightBtn"

        })

    })

    </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 class="leftRight"><a href="" class="leftBtn">左箭头</a><a href="" class="rightBtn">右箭头</a></div>

</div>

</body>

</html>

jquery自己写的带左右箭头自动播放幻灯插件，简化的更多相关文章

  1. 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用 ...

  2. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  4. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  5. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  6. 昨天晚上画了个带apple的图：ide插件与php和xdebug通信原理图，周末写1个调试器。

    昨天晚上画了个带apple的图:ide插件与php和xdebug通信原理图,周末写1个调试器.

  7. Cordova webapp实战开发：（5）如何写一个Andorid下自动更新的插件？

    在 <Cordova webapp实战开发:(4)Android环境搭建>中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个And ...

  8. Jquery 随便写些知识点

    针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...

  9. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. 面向视频的全新AI架构 —— 阿里云智能视觉技术全解

    我们都知道,AI技术正在以可见的速度被应用于各行各业,然而绝大部分业务场景想应用AI技术,都需要算法工程师根据自身业务的标注数据,来进行单独训练,才能打磨出合适的AI模型.如此一来,如何以最低的门槛和 ...

  2. thinkphp php审核后返回信息给html

    1.die("<script>alert('至少选择一个收款方式!');history.back(-1);</script>");

  3. Mac终端打开AndroidStudio已创建模拟器

    目的 偶尔我们只是想运行模拟器,并不想打开AndroidStudio,这时我们可以从终端找到emulator,通过emulator来启动指定名称的模拟器 步骤 1.找到emulator所在位置 fin ...

  4. windows10环境运用SSH和SwitchySharp自由翱翔

    以下纯干货: 安装篇: 安装git bash(自行去找下载包) 安装xshell(开始想用它,后来直接在git bash里用命令搞定了,安装它SSH Server就可用了可能) 安装Chrome的插件 ...

  5. homestead 重复出错

    vboxmanage list vms "homestead-7" {2c8b0ea2-d862-4f4e-bcb2-2d7db848686f} vboxmanage unregi ...

  6. 阿里开源新一代 AI 算法模型，由达摩院90后科学家研发

    最炫的技术新知.最热门的大咖公开课.最有趣的开发者活动.最实用的工具干货,就在<开发者必读>! 每日集成开发者社区精品内容,你身边的技术资讯管家. 每日头条 阿里开源新一代 AI 算法模型 ...

  7. Linux 中 grep 命令的 12 个实践例子

    2017-10-17 Linux小管家 你是否遇到过需要在文件中查找一个特定的字符串或者样式,但是不知道从哪儿开始?那么,就请grep来帮你吧. grep是每个Linux发行版都预装的一个强有力的文件 ...

  8. ODT模板

    struct node{ int l,r; mutable int v; node(int L,int R,int V):l(L),r(R),v(V){} inline bool operator & ...

  9. @noi.ac - 171@ 立方体

    目录 @description@ @solution@ @accepted code@ @details@ @description@ TonyFang 打算送你一些立方体. 你需要在 [1, n] ...

  10. 2015,2016 Open Source Yearbook

    https://opensource.com/yearbook/2015 The 2015 Open Source Yearbook is a community-contributed collec ...