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的MessageBox
Dec 03 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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类和对象相关系统函数与运算符小结
2016/09/28 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python控制台显示时钟的示例
2014/02/24 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
python回调函数用法实例分析
2015/05/09 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python发展简史 Python来历
2019/05/14 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
error和exception有什么区别
2012/10/02 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
党课学习思想汇报
2014/01/02 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
离婚被告答辩状
2015/05/22 职场文书
生活小常识广播稿
2015/08/19 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
小学新课改心得体会
2016/01/22 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
使用Ajax实现无刷新上传文件
2022/04/12 Javascript