热门关键字:
jquery > jquery教程 > jquery教程 > css3实现图片轮播和按钮

css3实现图片轮播和按钮

340
作者:管理员
发布时间:2021/8/20 18:21:45
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5293
  CSS代码:


  #second_div{


  margin-top: 160px;


  }


  。img_box{


  overflow: hidden;


  width:100%;


  height:420px;


  border:1px solid;


  position:relative;


  }


  。img_box img{


  width:100%;


  position:absolute;


  }


  。ul5{


  list-style: none;


  position:absolute;


  left:580px;


  top:565px;


  }


  。ul5 li{


  float:left;


  margin-left:20px;


  width:40px;


  height:5px;


  border:0px;


  background:lawngreen;


  }


  。d1,.d2{


  width:50px;


  height:60px;


  background-color: rgba(10,10,10,0.5);


  text-align: center;


  font-size:26px;


  font-weight: 800px;


  line-height:60px;


  cursor: pointer;


  }


  。d1{


  position:absolute;


  top:373px;


  left:25px;


  }


  。d2{


  position:absolute;


  top:373px;


  left:1445px;


  }


  HTML遇新是直朋能到分览代码:


  js代码遇新是直朋能到:


  $("#ss")。click(function(){var new_li=$("


  "+ $("#skuang")。val() +"");


  $("#d1 ul")。append(new_li);


  $("#d1")。hide();


  $("#skuang")。val("");


  })


  $("#skuang")。focus(function(){


  $("#d1")。css("display","block");


  });


  $("#skuang")。blur();


  $("#qingch")。click(function(){


  $("#d1 li:gt(0)")。remove();


  $("#d1")。hide();


  });//轮播图


  var img=$(".img_box img");var li=$(".ul5 li");var divW=$(".img_box")。width();var len=$(".img_box img")。length;


  img.css("left",divW);


  img.eq(0)。css("left",0);


  li.eq(0)。css("background","red");var index=0;var next=0;functionshow(){


  next++;if(next==len){


  next=0;


  }


  img.eq(next)。css("left",divW);


  img.eq(index)。animate();


  img.eq(next)。animate();


  li.eq(next)。css("background","red");


  li.eq(index)。css("background","lawngreen");


  index=next;


  }


  t=setInterval(show,2000);functionshow1(){


  next--;if(next==-1){


  next=len-1;


  }


  img.eq(next)。css("left",-divW);


  img.eq(index)。animate();


  img.eq(next)。animate();


  li.eq(next)。css("background","red");


  li.eq(index)。css("background","lawngreen");


  index=next;         比抖朋要插支一圈不者地


  }


  img.hover(function(){


  clearInterval(t);    遇新是直朋能到分览支体调


  },function(){


  t=setInterval(show,2000);


  })//左右按钮


  $(".d2")。mousedown(function(){


  clearInterval(t);


  show();


  })


  $(".d2")。mousedown(function(){


  t=setInterval(show,2000);


  })


  $(".d1")。mousedown(function(){


  clearInterval(t);


  show1();


  })


  $(".d1")。mousedown(function(){


  t=setInterval(show,2000);


  })//小白点 点击


  li.mousedown(function(){


  num=$(this)。index();if(num==next){return;


  }else if(num


  clearInterval(t);


  img.eq(num)。css("left",-divW);


  img.eq(index)。animate();


  img.eq(num)。animate();


  li.eq(num)。css("background","red");


  li.eq(index)。css("background","lawngreen");


  index=num;


  next=num;


  }else if(num>next){


  clearInterval(t);


  img.eq(num)。css("left",divW);


  img.eq(index)。animate();


  img.eq(num)。animate();


  li.eq(num)。css("background","red");


  li.eq(index)。css("background","lawngreen");


  index=num;


  next=num;


  }


  })


  li.mouseup(function(){


  t=setInterval(show,2000);


  })


  })




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐