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 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 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获取QQ达人QQ信息的方法
2015/03/05 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
Sea.JS知识总结
2016/05/05 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JS常用算法实现代码
2016/11/14 Javascript
解析js如何获取css样式
2016/12/11 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
数字漫画:comiXology
2020/06/13 全球购物
国际会议邀请函范文
2014/01/16 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014年技术部工作总结
2014/12/12 职场文书
报案材料怎么写
2015/05/25 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android