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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
js字符编码函数区别分析
Dec 28 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
移动端js触摸事件详解
Sep 18 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
用vue写一个日历
2020/11/02 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
质检部岗位职责
2013/11/11 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
协议书与合同的区别
2014/04/18 职场文书
求职简历自荐信
2014/06/18 职场文书
自主招生专家推荐信
2015/03/26 职场文书
面试通知邮件
2015/04/20 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技