jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法

更新時(shí)間：2015年05月12日 12:30:36 作者：vivi

這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法,涉及jQuery鏈?zhǔn)讲僮骷皥D片操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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>無標(biāo)題文檔</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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript錯(cuò)誤的認(rèn)識(shí)不用關(guān)心內(nèi)存管理
因?yàn)槔厥盏拇嬖?，讓javascript等高級(jí)語言開發(fā)者產(chǎn)生了一個(gè)錯(cuò)誤的認(rèn)識(shí)，以為可以不用關(guān)心內(nèi)存管理,需要的朋友可以了解下
2012-12-12
jquery實(shí)現(xiàn)滑動(dòng)圖片自己測(cè)試的例子
最近使用jquery寫了一個(gè)圖片滑動(dòng)的插件，雖然還是有些問題存在，用法很簡(jiǎn)單，希望對(duì)大家有所幫助
2013-11-11
jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框選擇圖片功能,可實(shí)現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下
2015-08-08
教你一步步用jQyery實(shí)現(xiàn)輪播器
相信大家應(yīng)該都會(huì)看到在各大網(wǎng)站上都有一個(gè)輪播器的效果，于是自己不禁也想做一個(gè)，查了資料，看了輪播器的原理，慢慢的試著做了做，最終效果勉勉強(qiáng)強(qiáng)，但還是想總結(jié)出來，或許對(duì)有需要的朋友們帶來一定的幫助，下面來一起看看吧。
2016-12-12
jQuery中scrollLeft()方法用法實(shí)例
這篇文章主要介紹了jQuery中scrollLeft()方法用法,實(shí)例分析了scrollLeft()方法的功能、定義及獲取或設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移(offset)量時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery實(shí)現(xiàn)不斷閃爍文字的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)不斷閃爍文字的方法,涉及jQuery中fadeOut、fadeIn方法及遞歸調(diào)用的技巧,需要的朋友可以參考下
2015-05-05
JQuery元素快速查找與操作
本篇文章給大家分享了關(guān)于JQuery元素查找與操作的相關(guān)技巧和流程，對(duì)此有需要的朋友可以跟著學(xué)習(xí)參考下。
2018-04-04
利用jquery.qrcode在頁面上生成二維碼且支持中文
這篇文章主要介紹了利用jquery.qrcode在頁面上生成二維碼且支持中文。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
Jquery+ajax請(qǐng)求data顯示在GridView上(asp.net)
Jquery ajax請(qǐng)求data顯示在asp.net中GridView控件上，需要的朋友可以參考下。
2010-08-08