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. Error:C:\Users\issuser\AndroidStudioProjects\SQLiteDemo1\.gradle\buildOutputCleanup\cache.properties (系统找不到指定的文件。)

    android studio报下图中的这个错误的解决办法: 解决办法: 1.删除掉下图中标记的2个文件夹 2.将下图标记的文件的文件名重命名,把最后的后缀.lock去掉,因为加上了这个后缀,所以提示找 ...

  2. LVS集群之工作原理和调度算法（2）

      LVS的工作机制 LVS里Director本身不响应请求,只是接受转发请求到后方,Realservers才是后台真正响应请求. LVS 工作原理基本类似DNAT,又不完全相像,它是一种四层交换,默 ...

  3. Jquery_基础(二) 包装集

    包装集 <body> <div id="a01">1.包装集——length</div> <div id="a02"& ...

  4. 【margin和padding的区别】

    margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...

  5. 详解css3弹性盒模型（Flexbox）

    目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...

  6. hdu_2087 剪花布条(kmp)

    剪花布条 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. python云算法

    http://www.runoob.com/python3/python3-basic-operators.html 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中, ...

  8. Myeclipse2014 已有项目更换JDK

    原先项目使用JDK是1.7,今天项目加入了一个新包,只支持JAVA8,让我们都升级一下本地的JDK,我突然发现我还没有在myeclipse上升级过JDK呢.捣鼓了一下,也不难,记录一下. 1.下载ja ...

  9. [国嵌攻略][160][SPI驱动程序设计]

    SPI Flash驱动 1.打开/drivers/mtd/devices/m25p80.c驱动文件.找到初始化m25p80_init函数,其中通过spi_register_driver来注册spi设备 ...

  10. 自己实现一个each迭代器

    什么是迭代器? 其实就是对一个对象内部进行遍历的方法,比如jquery的each方法,或者原生js的foreach方法. 迭代器的特点 针对迭代器,这里有几个特点: ☑ 访问一个聚合对象的内容而无需暴 ...