search

Home >Web Front-end >JS Tutorial >jquery image switching example analysis_jquery

jquery image switching example analysis_jquery

WBOY
WBOYOriginal
2016-05-16 16:03:511099browse

The example in this article describes the implementation method of jquery image switching. Share it with everyone for your reference. The details are as follows: 

<!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>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery radio (radio button) operation method summary_jqueryNext article：JQuery radio (radio button) operation method summary_jquery

Related articles

See more