小白的jquery学习之路之天猫轮播04 效果 delay函数 stop 函数 animate函数

最新推荐文章于 2024-04-06 13:12:20 发布

weixin_37770640

最新推荐文章于 2024-04-06 13:12:20 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/weixin_37770640/article/details/80615990

版权

11 animate（执行操作，多久执行完，执行完调用什么函数

$("#dan").animate({'margin-top':'0px'},3000,function(){
		$("#dan").delay(2000).animate({'margin-top':'-100px'},2000)}
		
		)

delay 函数，在2000秒之后执行后面的操作。在js中可以用window.setTimeout实现

.delay(2000).animate({'margin-top':'-100px'},2000)}

stop函数：让函数后面没执行的就不执行了，防止各种操作混合在一起造成混乱

$("#mbb .con").stop().animate({'left':left+'px'},300);

12 就布局了
13 点击实现轮播图效果

<html>
<head>
	<style type="text/css">
  *{
    margin: 0px auto;
    list-style-type: none;
  }


  #mbb ul{
    position: absolute;bottom: 0px;right: 0px;
  }

  #mbb ul li{
    width: 116px;height:29px;float: left;line-height: 29px;text-align: center;opacity: 0.4;color: white;background-color: black;font-size: 12px;margin-left: 1px;
  }
   #mbb ul li:hover{
    color: #C00;
    
  }

  img{
  width: 952px;height: 440px;float: left;
  }

#mbb{
  width: 952px;height: 440px;border: 4px green solid;margin:0px auto; position: relative;top: 0px;left:0px;overflow: hidden;       
}
#mbb .con{
  width: 4760px;height: 440px;position: absolute;left: 0px;top:0px;
}
	</style>
  


	<script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
      var c=0;
     
     
      $("#mbb ul li").click(function(){
        c=$(this).index();
        var left=c*(-952);
        $("#mbb .con").stop().animate({'left':left+'px'},300);
        $(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'})
      })
     
      
   })
      
       
  
</script>


</head>
<body>

 


<div id="mbb">
  <div class="con">
      <img src="p1.jpg">
       <img src="p2.jpg"> 
       <img src="p3.jpg">
       <img src="p4.jpg">
       <img src="p5.jpg">
   </div>
   <ul>
    <li style="opacity:0.7">衣服1</li>
    <li>裙子2</li>
    <li>套装3</li>
    <li>时尚4</li>
     <li>可爱爱5</li>
  </ul>
 

</div>






</body>
</html>

让小盒子套大盒子，通过改变大盒子里面的left值，点击那个li就用$(this).index()得到相应的数组的值，通过改变盒子的left实现点击图片切换效果