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


Posted in Javascript onMay 12, 2015

本文实例讲述了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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jquery实现保存已选用户
Jul 21 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
浅谈javascript的分号的使用
May 12 #Javascript
JS中Location使用详解
May 12 #Javascript
js获取微信版本号的方法
May 12 #Javascript
javascript中基本类型和引用类型的区别分析
May 12 #Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 #Javascript
Javascript中typeof 用法小结
May 12 #Javascript
js/jquery判断浏览器类型的方法小结
May 12 #Javascript
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
用jscript实现新建word文档
2007/06/15 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python定义一个函数的方法
2020/06/15 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
应届大学生自荐信
2013/12/05 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
教师个人自我鉴定
2014/02/08 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书