Rumah > Artikel > hujung hadapan web > kaedah mudah jquery untuk mencapai effect_jquery penukaran imej

kaedah mudah jquery untuk mencapai effect_jquery penukaran imej

WBOYasal: 2016-05-16 15:59:451069semak imbas

Contoh dalam artikel ini menerangkan cara jquery hanya boleh melaksanakan kesan penukaran imej. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

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

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah JS untuk menutup kotak gesaan lapisan DIV secara automatik pada kemahiran intervals_javascript tetapArtikel seterusnya：Kaedah JS untuk menutup kotak gesaan lapisan DIV secara automatik pada kemahiran intervals_javascript tetap

Artikel berkaitan

Lihat lagi