jquery实现简单播放图片功能

最新推荐文章于 2022-10-18 09:39:11 发布

原创最新推荐文章于 2022-10-18 09:39:11 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #div #generator #html #c

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的图片切换效果案例。该案例通过点击按钮来切换显示不同的图片，并利用jQuery简化DOM操作，实现流畅的用户体验。文章详细展示了如何通过JavaScript函数控制图片的显示与隐藏，以及如何设置图片的显示顺序。

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <mce:script type="text/javascript" src="./jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script>
 
 </HEAD>
<BODY>

<div id="a" >
	<img name="a"   src="./img/pre-hover.gif" mce_src="img/pre-hover.gif" onclick="frontImg('b','g','bounds0')"/>
</div>
<div id=bounds0>
<div id="b">
	<img name="b" src="./img/b.gif" mce_src="img/b.gif" />
	BBBB
</div>
<div id="c">
	<img name="c"  src="./img/c.gif" mce_src="img/c.gif" />
	CCCC
</div>
<div id="d">
	<img name="d" id="d" src="./img/d.gif" mce_src="img/d.gif" />
	DDDD
</div>
<div id="e" style= "display:none">
	<img name="e" src="./img/e.gif" mce_src="img/e.gif" />
	EEEE
</div>
<div id="f"  style= "display:none">
	<img name="f"  src="./img/f.gif" mce_src="img/f.gif" />
	FFFF
</div>
<div id="g"  style= "display:none" >
	 <img name="g"  src="./img/g.gif " mce_src="img/g.gif " />
	 GGGG
</div>
</div >
<div id="h"  >
	<img name="h"  src="./img/next-no.gif" mce_src="img/next-no.gif" onclick="backImg('b','g','bounds0')"/>
</div>
</BODY>
</HTML>
 <mce:script type="text/javascript"><!--
    
     function frontImg(beginID,endID,imgDIV){
	        
         var ishidden=$("#"+endID).is(":hidden");
		
		 if(ishidden)
		 {
		    //找到第一个显示的将之隐藏
             $.each($("#"+imgDIV+" div"),function(i,n){
			         if(!$(n).is(":hidden"))
						 {
							 $(n).hide();
							 return false;
						 }
					 }
			 );
			 
			//找到最后一个显示的 后一个DOM节点将之显示
			var  lastShowDOM='';
             $.each($("#"+imgDIV+" div"),function(i,n){
			         if(!$(n).is(":hidden"))
						 {
							lastShowDOM=n;
						 }
					 }
			 );
             
			  $(lastShowDOM).next().show();
			 
		 }
		 else
		 {
		      $("#a" +" img:first-child").attr('src','./img/pre-no.gif');
			
		 }

$("#h" +" img:first-child").attr('src','./img/next-hover.gif');
		  
	  }
	  function backImg(beginID,endID,imgDIV){
		
		var ishidden=$("#"+beginID).is(":hidden");
		
		 if(ishidden)
		 {
             //找到第一个显示的 前一个DOM节点将之显示 
             $.each($("#"+imgDIV+" div"),function(i,n){
			         if(!$(n).is(":hidden"))
						 {
							 $(n).prev().show();
							 return false;
						 }
					 }
			 );
			//找到最后一个显示的将之隐藏
            var  lastShowDOM='';			
             $.each($("#"+imgDIV+" div"),function(i,n){
			         if(!$(n).is(":hidden"))
						 {
							lastShowDOM =n;
						 }
					 }
			 );
             $(lastShowDOM).hide();
			 
			 
		 }
		 else
		 {
		     $("#h" +" img:first-child").attr('src','./img/next-no.gif');
		 }
	       
		 $("#a" +" img:first-child").attr('src','./img/pre-hover.gif');
	  }
 
// --></mce:script>