脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery图片切换效果

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

 更新时间：2015年05月12日 12:30:36   作者：vivi  
这篇文章主要介绍了jquery简单实现图片切换效果的方法,涉及jQuery链式操作及图片操作的相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javascript错误的认识不用关心内存管理

    javascript错误的认识不用关心内存管理

    因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理,需要的朋友可以了解下
    2012-12-12
  • jquery实现滑动图片自己测试的例子

    jquery实现滑动图片自己测试的例子

    最近使用jquery写了一个图片滑动的插件，虽然还是有些问题存在，用法很简单，希望对大家有所帮助
    2013-11-11
  • jQuery实现下拉框选择图片功能实例

    jQuery实现下拉框选择图片功能实例

    这篇文章主要介绍了jQuery实现下拉框选择图片功能,可实现带图片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以参考下
    2015-08-08
  • 教你一步步用jQyery实现轮播器

    教你一步步用jQyery实现轮播器

    相信大家应该都会看到在各大网站上都有一个轮播器的效果，于是自己不禁也想做一个，查了资料，看了轮播器的原理，慢慢的试着做了做，最终效果勉勉强强，但还是想总结出来，或许对有需要的朋友们带来一定的帮助，下面来一起看看吧。
    2016-12-12
  • jQuery中scrollLeft()方法用法实例

    jQuery中scrollLeft()方法用法实例

    这篇文章主要介绍了jQuery中scrollLeft()方法用法,实例分析了scrollLeft()方法的功能、定义及获取或设置匹配元素相对滚动条左侧的偏移(offset)量时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery实现不断闪烁文字的方法

    jQuery实现不断闪烁文字的方法

    这篇文章主要介绍了jQuery实现不断闪烁文字的方法,涉及jQuery中fadeOut、fadeIn方法及递归调用的技巧,需要的朋友可以参考下
    2015-05-05
  • JQuery元素快速查找与操作

    JQuery元素快速查找与操作

    本篇文章给大家分享了关于JQuery元素查找与操作的相关技巧和流程，对此有需要的朋友可以跟着学习参考下。
    2018-04-04
  • 利用jquery.qrcode在页面上生成二维码且支持中文

    利用jquery.qrcode在页面上生成二维码且支持中文

    这篇文章主要介绍了利用jquery.qrcode在页面上生成二维码且支持中文。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • 基于jQuery创建鼠标悬停效果的方法

    基于jQuery创建鼠标悬停效果的方法

    这篇文章主要介绍了基于jQuery创建鼠标悬停效果的方法,实例分析了jQuery实现鼠标特效的原理与详细步骤,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Jquery+ajax请求data显示在GridView上(asp.net)

    Jquery+ajax请求data显示在GridView上(asp.net)

    Jquery ajax请求data显示在asp.net中GridView控件上，需要的朋友可以参考下。
    2010-08-08

最新评论