jQuery事件按执行时间，主要分为两种，第一种是在网页加载完执行，第二种绑定在元素中，由访问者某些行为触发。

$(document).ready(function(){

   //事件

});

$("#xx").bind(  "click",function(){

   //事件

});
$("#xx").unbind("click");  //接触该元素的所有click事件

当然，第二种事件一般情况下是放在第一种内部的

事件的简写

$("#xx").click(function(){

 //事件

});

jQuery还提供了一些合成事件，简化代码

hover(enter,leave);//光标移动到某位置，触发enter事件，离开触发leave事件

toggle(fn1,fn2,fn3...);//鼠标连续单击事件

$("#xx").hover(function(){

    $(this).hide();

},function{

    $(this).show();

});                             //此段代码仅为举例，运行效果并不好

事件冒泡的解决方法

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8"/>

   <title>example for html5</title>

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

</head>

<body>

   <div id="diveve">

     <p id="peve">

       ncqnvqj<a href=# id="aeve">aeve</a>

     </p>

   </div>

<script type="text/javascript">

$(document).ready(function(){

$("#diveve").click(function(){

  alert("div");

});

$("#peve").click(function(event){

  alert("p");

  event.stopPropagation();

});

$("#aeve").click(function(event){

  alert("a");

  event.stopPropagation();

});

});

模拟操作：trigger()

$("#xx").trigger("click");    //普通模拟

$("#xx").bind("myclick",function(){});

$("#xx").trigger("myclick");        //自定义事件

$("#xx").bind("myclick",function(event,message1,message2){});

$("#xx").trigger("myclick",["我的自定义","事件"]); //传递数据

集合以上知识点，可实现图片的轮播动画：

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8"/>

   <title>example for html5</title>

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

   <style type="text/css">

    .showmore{

    position:absolute;

    top:100px;

    width:300px;

    left:50%;

    margin-left:-150px;

    height:100px;

    overflow:hidden;

    display:inline-block;

    border:1px pink solid

    }

   </style>

</head>

<body>

<div><a href=# id="button">翻页</a></div>

<div class="showmore" >

</div>

<script type="text/javascript">

$(document).ready(function(){

for(var i=1;i<5;i++)

{  

   $divpic=$("<img class='imgr'/>");

   $divpic.attr("src",String(i)+".jpg");

   $(".showmore").append($divpic);

   $divpic.css({"position":"absolute","top":"0px","left":i*100-100+"px","width":"100px","height":"100px"});

}

    $(function()
   {                                                                             //把轮播函数放在匿名函数中

    $("#button").bind("click",function()                                         //给button绑定事件
       {
         $(".imgr").animate({left:"-=100px"},function()                           //animate()方法中回调函数的使用

           {

              for(var i=0;i<4;i++)                                                //遍历找出第一张图片，并将其移动到盒子最后端

                {

                  if($($(".imgr")[i]).css("left")=="-100px")                      //这里涉及到DOM和jQuery对象的相互转化

                     {

                        $($(".imgr")[i]).css("left","300px");

                      }

                 }

            });

       });

   });

});

</script>

</body>

</html>

jQuery事件 （jQuery实现图片轮播）的更多相关文章

  1. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  2. 天猫首页迷思之－jquery实现左侧广告牌图片轮播

    本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

  3. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  4. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  5. jQuery插件slider实现图片轮播

    1:引入相应的js文件  jquery.SuperSilder.js 2:HTML: 结构 注:此地加载图片的代码也可以从后台库中读取图片的集合列表,然后通过循环的方式显示出来 3:CSS 样式定义左 ...

  6. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  8. ios开发图片轮播器以及定时器小问题

    一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: #import "ViewController.h" ; @interface Vie ...

  9. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  10. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. 设计模式六大原则（PHP）

    设计模式的目的是为了更好的代码重用性,可读性,可靠性和可维护性.常用的六大设计模式有:单一职责原则(SRP),里氏替换原则(LSP),依赖倒转原则(DIP),接口隔离原则(ISP),迪米特法则(LOD ...

  2. 数独GUI程序项目实现

    数独GUI程序项目实现 导语:最近玩上了数独这个游戏,但是找到的几个PC端数独游戏都有点老了...我就想自己做一个数独小游戏,也是一个不错的选择. 前期我在网上简单地查看了一些数独游戏的界面,代码.好 ...

  3. 如何获取离线安装Chrome扩展程序的包

    最近工作环境限制,有些机器文件只能拿进去,不能拿出来.网络也是内部网络,没法下载东西.工作中常用的一些Chrome扩展应用也没法使用,对于我这类工具爱好者,打击够大.后来想想,既然扩展应用能开发打包上 ...

  4. Node+mongodb线上部署到阿里云

    Node+mongodb线上部署到阿里云 部署使用的主要工具是pm2+nginx,使用码云的私有仓库,自动部署到服务器,私有仓库和服务器要事先设置好免密码登录.使用DNSPOD进行域名解析.事先准备好 ...

  5. BZOJ 2038: [2009国家集训队]小Z的袜子(hose)【莫队算法裸题&&学习笔记】

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 9894  Solved: 4561[Subm ...

  6. itoa函数，sprintf函数

    itoa函数 itoa 为c语言的一个函数.itoa 函数是一个广泛应用的,从非标准扩展到标准的C语言.它不能被移植,因为它不是标准定义下的C语言,但是,编译器通常在一个不遵循程式标准的模式下允许其通 ...

  7. B. Secret Combination

    B. Secret Combination time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  8. ubuntu11.0静态ＩＰ地址配置

    1. 静态IP地址配置 配置文件路径:/etc/network/interfaces auto lo iface lo inet loopback auto eth0 iface eth0 inet ...

  9. Windows下MYSQL读取文件为NULL

    只记录解决问题的方法. mysql 版本: 5.7.18 问题: 在执行mysql 函数load_file时,该函数将加载指定文件的内容,存储至相应字段.如: SELECT LOAD_FILE(&qu ...

  10. C语言课程设计大整数运算

    该大整数运算系统用于对有符号的位数不超过500位的大整数进行加.减.乘.除四则运算和计算N(0<=N<=10000)的阶乘.注意事项 :    1.操作期间,进行四则运算时若大整数为正数请 ...