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. Memory Map

    计算机最重要的功能单元之一是Memory.Memory是众多存储单元的集合,为了使CPU准确地找到存储有某个信息的存储单元,必须为这些单元分配一个相互区别的“身份证号”,这个“身份证号”就是地址编码. ...

  2. 【个人笔记】《知了堂》ajax的get及post请求

    ajax 执行步骤 // 步骤 设置事件 调用函数 创建一个XHR对象 打开ajax通道,链接服务器,配置请求信息和参数 发送数据 设置回调函数 服务器接受请求,处理请求,查询数据库,响应 及 返回数 ...

  3. js和jquery通过this获取html标签中的属性值

    <html> <head> <script type="text/javascript" src="jquery-1.10.2.min.js ...

  4. Ajax方式分页加载列表实现

    在前面: 最近需要用到这个功能,所以这几天一直在研究这个,目前大致功能已实现,后续需要完善,但需要的功能点已完成,记录下: 1.分页功能引入bootstrap的分页插件: <script typ ...

  5. python查询完结篇

    0x00 网上找一个查询网站,然后自己写的一个脚本 0x01 代码送上: import requests import time from bs4 import BeautifulSoup strat ...

  6. itoa函数，sprintf函数

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

  7. hdu_1286找新朋友(欧拉定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1286 找新朋友 Time Limit: 2000/1000 MS (Java/Others)    M ...

  8. PL/SQL 一个数据对象一个事务（rollback，submit）

    /*********************************************** 一个数据对象一个事务(且记录错误信息到处理对象) ************************** ...

  9. C# 构造器总结

    在C#中,构造器分为实例构造器和类型构造器, 一.实例构造器 构造引用类型的对象时,在调用实例 构造器之前,为对象分配的内存总是归0,没有被构造器显示重写的字段都保证获得0或null的值 在一个类中, ...

  10. Winform 控件的入门级使用（一）

    开始总结一下控件的基本用法,方便以后查阅. 一.Label Label 的使用频率很高,基本上也没有什么难度. #region Winform //label label.Text = "这 ...