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. 微信小程序——获取openid

    1.在微信小程序后台得到appid.AppSecret 2.在任意小程序界面的[onLoad]中取得code(建议将代码写在index.js中) 3.用取得code换取openid 如后台无法将ope ...

  2. App开发 对生命周期的处理

    //获取到当前所在的视图 - (UIViewController *)presentingVC:(UIApplication *)application{ UIWindow * window = ap ...

  3. MySQL常用查询语句汇总（不定时更新）

    在这篇文章中我会通过一些例子来介绍日常编程中常用的SQL语句   目录: ## 1.数据库的建立     ## 1.数据库的建立   实例将ER图的形式给出:   由此转换的4个关系模式:      ...

  4. Python scikit-learn机器学习工具包学习笔记

    feature_selection模块 Univariate feature selection:单变量的特征选择 单变量特征选择的原理是分别单独的计算每个变量的某个统计指标,根据该指标来判断哪些指标 ...

  5. Unknown column in 'where clause'

    Unknown column in 'where clause' 错误如题:Unknown column in 'XXX' 'where clause' 意思是:未知表名 排查 1,查表名是否有错 2 ...

  6. C/C++中__builtin_popcount()的使用及原理

    __builtin_popcount()用于计算一个 32 位无符号整数有多少个位为1 Counting out the bits     可以很容易的判断一个数是不是2的幂次:清除最低的1位(见上面 ...

  7. Codeforces 834D The Bakery【dp+线段树维护+lazy】

    D. The Bakery time limit per test:2.5 seconds memory limit per test:256 megabytes input:standard inp ...

  8. Spider_Man_5.2 の Mongodb_使用

    一:简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用关系型主要是为了获得 ...

  9. UIScrollerview的contentsize设置

    最近被同行的一个朋友问到一个问题"UIScrollerview上添加子控件,给子控件约束好布局之后,还需要给scrollerview重新设置contentsize吗?"于是想到了我 ...

  10. Spark算子--reduceByKey

    reduceByKey--Transformation类算子 代码示例 result