<!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. Nginx教程(五) Nginx配置文件详解 （转）

    一. Nginx配置文件nginx.conf中文详解 #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processe ...

  2. DAY1-作业

    Python-day1-------> 本节内容: Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据 ...

  3. database homework3

    查询所有大于60分的学生的姓名和学号 (DISTINCT: 去重) mysql> select student.sname,student.sid,score.number from stude ...

  4. scala2.11读取文件

    1.读取行 要读取文件的所有行,可以调用scala.io.Source对象的getLines方法: import scala.io.Source val source = Source.fromFil ...

  5. poj 2229 【完全背包dp】【递推dp】

    poj 2229 Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 21281   Accepted: 828 ...

  6. joinquant 策略

    代码 # 克隆自聚宽文章:https://www.joinquant.com/post/20590 # 标题:ETF单均线跟踪轮动 # 作者:那時花開海布裡 ''' ================= ...

  7. Java面向对象----封装概念

    封装 信息隐藏,隐藏对象的细节 访问修饰符 public private protected 默认 属性封装的实现 方法封装的目的(隐藏方法实现细节) package com.tanlei.newer ...

  8. poj 3225 【线段树】

    poj 3225 这题是用线段树解决区间问题,看了两天多,算是理解一点了. Description LogLoader, Inc. is a company specialized in provid ...

  9. java执行sql语句使用别名时显示Column '***' not found

    java执行sql语句使用别名时显示Column '*' not found 在做一个小项目时遇到个问题,执行sql语句使用别名时总是报sql异常 Column '*' not found,折腾半天终 ...

  10. Java练习 SDUT-2737_小鑫の日常系列故事（六）——奇遇记

    小鑫の日常系列故事(六)--奇遇记 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 今天,小鑫在山上玩的时候,意外被推下 ...