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. 数据结构-二叉树（应用篇）-之二叉搜索树 C和C++的实现

    一.概念 二叉搜索树(Binary Sort Tree/Binary Search Tree...),是二叉树的一种特殊扩展.也是一种动态查找表. 在二叉搜索树中,左子树上所有节点的均小于根节点,右子 ...

  2. ElasticSearch 集群监控

    要监控哪些 ElasticSearch metrics? Elasticsearch 提供了大量的 Metric,可以帮助您检测到问题的迹象,在遇到节点不可用.out-of-memory.long g ...

  3. Java--高效的定时任务设计

    相信你在日常的开发中肯定遇到过这种问题: 需要对实体类的状态信息进行管理,比如一定时间后修改它为XXX状态. 举个例子: 订单服务,当用户提交了订单后,如果在30分钟内没有支付,自动取消订单,这就是一 ...

  4. Memcache缓存

    memcache 是服务器缓存系统,以键值对方式保存数据到内存中,把对象序列化后,理论上可支持所有的数据类型.使用情景:怎么用都可以,注意的是它只把数据保存到内存中,重启memcache 服务后丢失, ...

  5. html笔记2

    html css的用法 <style type="text/css">代表我要使用css了 <html> <head> <style ty ...

  6. JavaSE（八）之集合练习一

    前面把Collection家族给学习完毕了,接下来我们通过几个练习来巩固前面的知识. 一.产生10个1-20之间的随机数要求随机数不能重复 import java.util.HashSet; impo ...

  7. Vijos P1116 一元三次方程求解【多解，暴力,二分】

    一元三次方程求解 描述 有形如:ax^3+bx^2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之 ...

  8. Springboot-shiro-redis实现登录认证和权限管理

    Springboot-shiro-redis实现登录认证和权限管理 在学习之前: 首先进行一下Apache Shiro和Shiro比较: Apache Shiro是一个功能强大.灵活的,开源的安全框架 ...

  9. Java Web学习路线图

    三张Java Web完整学习路线图,阶段一和JavaSE部分可不学

  10. APACHE 服务器开启URL REWRITE模块的方法

    最近做wordpress,发现固定链接总是设置不了.后来发现是由于apache服务器的URL REWIRITE模块没有开启导致. 查询了资料之后终于设置成功,记录下步骤: 1:开启apache的url ...