Home > Article > Web Front-end > jquery simple method to achieve image switching effect_jquery

jquery simple method to achieve image switching effect_jquery

WBOYOriginal: 2016-05-16 15:59:451032browse

The example in this article describes how jquery can simply implement the image switching effect. Share it with everyone for your reference. The specific implementation method is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#slider{
 position:relative;
 overflow:hidden;
 margin:20px auto;
 height:240px;
 width:740px;
 padding:5px;
 border:2px solid #cdcdcd;
}
#show{
 position:relative;
 height:240px; 
 width:740px;
}
#show .img{
 width:740px;
 height:240px;
 margin-bottom:5px;
}
#num{
 position:absolute;
 right:5px;
 top:220px;
}
#num span{
 float:left;
 display:block;
 text-align:center;
 width:20px;
 height:20px;
 line-height:20px;
 margin:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:blod;
 background:#f2f2f2;
 border:1px solid #D78918;
 color:#D78918;
}
#num .current{
 color: #fff;
 width:21px;
 height:21px;
 line-height:21px;
 font-size: 16px;
 border:0px;
 margin:0px 1px;
 background-color: #FF7300;
}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
 var count=1;
 setInterval(function(){
 count=count==5&#63;0:count;
 var top=-count*(240+5);
 count++;
 $("#show").animate({top:top},600);
 $("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current");
 },2000);
})
-->
</script>
</head>
<body>
<div id="slider">
 <div id="show">
   <div class="img" style="background:red;"></div>
   <div class="img" style="background:blue"></div>
   <div class="img" style="background:gold"></div>
   <div class="img" style="background:yellow"></div>
   <div class="img" style="background:green"></div>
  </div>
  <div id="num">
  <span class="current">1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  </div>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS method to automatically close the DIV layer prompt box at regular intervals_javascript skillsNext article：JS method to automatically close the DIV layer prompt box at regular intervals_javascript skills

See more

jquery simple method to achieve image switching effect_jquery

Related articles