jquery简单实现图片切换效果的方法

前端技术 2023/09/06 JavaScript

本文实例讲述了jquery简单实现图片切换效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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?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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15872

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案