jQuery事件 （jQuery实现图片轮播）

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>

 

posted @ 2017-07-12 15:33  kkdf  阅读(1891)  评论(0)  编辑  收藏  举报