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 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
11行JS代码制作二维码生成功能
Mar 09 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
浅析vue数据绑定
2017/01/17 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python三级菜单的实例
2017/09/13 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Django跨域请求原理及实现代码
2020/11/14 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
《望洞庭》教学反思
2014/02/16 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
技术员个人工作总结
2015/03/03 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis