您的位置：首页 > Web前端 > JQuery

jQuery——1、图片动画效果+2、点击切换div显示其内容

2018-01-03 20:36 1336 查看
<script type="text/javascript">
var flag=0;
var a=new Array();
a[0]="img/bb.png";
a[1]="img/dd.png";
  setInterval(f1,5000);
  function f1(){
//$("#im1").fadeOut(2000);//淡入淡出
//$("#im1").hide(2000);//显示隐藏
$("#im1").slideUp(2000);//滑入滑出
//时间等待函数

        setTimeout(f2,2000);
  }
function f2(){
$("#im1").prop("src",a[flag%a.length]);
//$("#im1").fadeIn(2000);
$("#im1").show(2000);
$("#im1").animate({
width:"900px"
},1000);
//$("#im1").slideDown(2000);
flag++;
}
</script>



<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
  <div id="div1" style="width: 100px;height: 25px;background: #DDDDDD;">衬衫</div>
  <table id="ta1" style="margin-left: 10px;display: none;">
    <tr><td>短袖衬衫</td></tr>
    <tr><td>短袖衬衫</td></tr>
    <tr><td>短袖衬衫</td></tr>
  </table>
  
  <div id="div2" style="width: 100px;height: 25px;background: #DDDDDD;">卫衣</div>
  <table id="ta2" style="margin-left: 10px;display: none;">
    <tr><td>卫衣</td></tr>
    <tr><td>卫衣</td></tr>
    <tr><td>卫衣</td></tr>
  </table>
  
  <div id="div3" style="width: 100px;height: 25px;background: #DDDDDD;">裤子</div>
  <table id="ta3" style="margin-left: 10px;display: none;">
    <tr><td>裤子</td></tr>
    <tr><td>裤子</td></tr>
    <tr><td>裤子</td></tr>
  </table>
  
  <script type="text/javascript">
  $("#div1").click(function(){
  if($("#ta1").is(":hidden")){
  $("#div1").css("background","red");
  $("#ta1").show();
     }else{
   
$("#div1").css("background","#DDDDDD");
  $("#ta1").hide();
     } 

  $("#div2").css("background","#DDDDDD");
  $("#ta2").hide();
  $("#div3").css("background","#DDDDDD");
  $("#ta3").hide();
  });
 
  $("#div2").click(function(){
  if($("#ta2").is(":hidden")){
  $("#div2").css("background","red");
  $("#ta2").show();
     }else{
   
$("#div2").css("background","#DDDDDD");
  $("#ta2").hide();
     } 

  $("#div1").css("background","#DDDDDD");
  $("#ta1").hide();
  $("#div3").css("background","#DDDDDD");
  $("#ta3").hide();
  });
 
  $("#div3").click(function(){
  if($("#ta3").is(":hidden")){
  $("#div3").css("background","red");
  $("#ta3").show();
     }else{
   
$("#div3").css("background","#DDDDDD");
  $("#ta3").hide();
     } 

  $("#div2").css("background","#DDDDDD");
  $("#ta2").hide();
  $("#div1").css("background","#DDDDDD");
  $("#ta1").hide();
  });
  </script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航