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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
json的使用小结
Jun 08 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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和ACCESS写聊天室(二)
2006/10/09 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python中的二维列表实例详解
2018/06/19 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
python调用私有属性的方法总结
2020/07/24 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
一套C#面试题
2013/10/09 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
护士进修自我鉴定
2014/02/07 职场文书
触电现场处置方案
2014/05/14 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
详解JAVA的控制语句
2021/11/11 Java/Android