jquery图片切换实例分析


Posted in Javascript onApril 15, 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>
<script language="javascript" src="inc/jquery-1.4.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#butt div{
 width:122px; height:32px; float:left; text-align:center;
}
</style>
<script language="javascript">
function tab_q(now_id)
{
if(now_id == null)
{
 //alert($("#butt").find("div:visible").attr("id"))
 c_show_id = $("#cont").find("div:visible").attr("id");
 //此时显示按钮的ID名称
 nums_id = c_show_id.substring(1,3);
 //截取B1后面的1,作为字符串放到C后面
 b_show_id = "b"+ nums_id;
 //此时显示内容的ID名称
 nums_next = parseInt(nums_id)+1
 //alert(nums_next)
 if(nums_next<=8)
 //如果到最后一个的话,那么就要跳回第一个
 {
 }
 else
 {
 nums_next = 1
 }
}else
{
nums_next = now_id.substring(1,3);
}
  $("#cont div").hide();
  //让所有的上面的div中的图片消失。
  //是为了罗出地方让下一张图片出现的。
  $("#butt div").css({border:'#FF0000 0px solid'});
  //让所有按钮的边框消失。是为了让下一个按钮有边框,
  //alert("#"+"c"+nums_next)
  $("#c"+nums_next).fadeIn() //让上面的图片淡出来
  $("#b"+nums_next).css({border:'#FF0000 1px solid'});
  //给下面对应的按钮加上边框,当然这里也可以做其他的效果
  //加边框只是为了测试
}
$(function(){ //当页面加载完成
 auto = setInterval("tab_q()",2000); //这里修改切换的时间的
 $("#cont div").each(function(i,n){
  $(n).hover(
  function(){
  clearInterval(auto) },
  function(){auto=setInterval("tab_q()",2000); }
  )
 })
 $("#butt div").each(function(i,n){
  $(n).hover(
  function(){
  clearInterval(auto);
  tab_q($(this).attr("id"))
  },function(){auto=setInterval("tab_q()",2000); }
  )
  })
})
</script>
<body>
<div style="width:980px; height:275px;">
 <div style="width:980px; height:241px; overflow:hidden; 
 text-align:center" id="cont">
  <div style="width:980px; height:241px; text-align:center" 
  id="c1"><img src="images/xmjz.jpg" width="980"/>
  </div>
  <div style="width:980px; height:241px; display:none; 
  text-align:center" id="c2">
  <img src="images/4037.jpg" width="980" height="241"/>
  </div>
  <div style="width:980px; height:241px; display:none; 
  text-align:center" id="c3"><img src="images/4041.jpg" 
  width="980" height="241"/></div>
  <div style="width:980px; height:241px; display:none; 
  text-align:center" id="c4">
  <img src="images/xmjz.jpg" width="980"/>
  </div>
  <div style="width:980px; height:241px; 
  display:none;text-align:center" id="c5">
  <img src="images/xmjz.jpg" width="980"/>
  </div>
  <div style="width:980px; height:241px; 
  display:none;text-align:center" id="c6">
  <img src="images/xmjz.jpg" width="980"/>
  </div>
  <div style="width:980px; height:241px; 
  display:none;text-align:center" id="c7">
  <img src="images/xmjz.jpg" width="980"/>
  </div>
  <div style="width:980px; height:241px; 
  display:none;text-align:center" id="c8">
  <img src="images/xmjz.jpg" width="980"/>
  </div>
 </div>
<div style="width:980px; height:31px; border:#FF0000 0px solid" 
id="butt">
<div style="background-image:url(images/xmbtn_1.png)" id="b1">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b2">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b3">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b4">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b5">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b6">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b7">
</div>
<div style="background-image:url(images/xmbtn_2.png)" id="b8">
</div>
</div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 #Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 #Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 #Javascript
jquery实现简单的无缝滚动
Apr 15 #Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 #Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 #Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
You might like
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
php curl_init函数用法
2014/01/31 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
实例讲解python函数式编程
2014/06/09 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
携程英文网站:Trip.com
2017/02/07 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
收银员岗位职责
2014/02/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
学术诚信承诺书
2014/05/26 职场文书
党性教育心得体会
2014/09/03 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
python获取带有返回值的多线程
2022/05/02 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL