<!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. 在APPfuse中配置log4j进行定位

    appFuse使用log4j进行日志输出,默认日志级别为warn,输出到串口console. 一下修改为debug级别,输出到串口及文件中: 1.修改(tomcat中的页面根目录)/appfuse/W ...

  2. day39-Spring 19-今天的内容总结

  3. SDUT-2144_最小生成树

    数据结构实验之图论九:最小生成树 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个城市,其中有些城市之间可以修建公 ...

  4. 小爬爬5:重点回顾&&移动端数据爬取1

    1. ()什么是selenium - 基于浏览器自动化的一个模块 ()在爬虫中为什么使用selenium及其和爬虫之间的关联 - 可以便捷的获取动态加载的数据 - 实现模拟登陆 ()列举常见的sele ...

  5. 2019-6-23-WPF-网络-request-的-read-方法不会返回

    title author date CreateTime categories WPF 网络 request 的 read 方法不会返回 lindexi 2019-06-23 11:26:26 +08 ...

  6. 2019-11-19-git-修改commit日期为之前的日期

    title author date CreateTime categories git 修改commit日期为之前的日期 lindexi 2019-11-19 08:53:16 +0800 2018- ...

  7. genymotion 和genymotion eclipse 插件安装 ！

    昨天天有好心网友在群里共享了一个好用的 android 模拟器 genymotion 昨天就试用了下 真心流畅 各位不妨一试 http://www.genymotion.com/ doc https: ...

  8. POJ2663 Tri Tiling

    思路: 设a[i]为N=i时的方法数.i为奇数的时候肯定为0. 如果i为偶数,a[i]可以看成a[i-2]加上两个单位组成的,此时多出来的2单位有3种方法. 也可以看成a[i-4]加上四个单位组成的, ...

  9. @bzoj - 4709@ 柠檬

    目录 @desription@ @solution@ @accepted code@ @details@ @desription@ 一共有 N 只贝壳,编号为 1...N,贝壳 i 的大小为 si. ...

  10. OracleSpatial函数

    Oracle_spatial的函数 一sdo_Geom包的函数: 用于表示两个几何对象的关系(结果为True/False)的函数:RELATE,WITHIN_DISTANCE 验证的函数:VALIDA ...