`

jQuery图片切换显示隐藏左右按钮控制图片-20130626

阅读更多
1、效果及功能说明
图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏

2、实现原理
首先是让图片在一个带有实现事件的div内显示出来,让其他图片进行隐藏,定义一个轮播的滚动效果结合时间上的控制,让图片在规定的时间里进行轮换,轮换掉的图片进行隐藏,定义按钮的点击事件让按钮点击后改变背景颜色或者是轮播完的按钮消除背景颜色,让按钮编号分别对应三张图片让点击几号按钮是显示哪张图片,在设定当鼠标没有点击和触碰图片或者按钮下多少秒后回复正常播放,在显示的div两侧的左右按钮上在定义一个点击事件,让这个事件带有可以马上轮播掉当前的图片,替换的图片是按照当前图片的左右来计算,在点击任何按钮后轮播停止,在过去3秒后从新开始轮播效果

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial;}
a{font-size:12px;color:#ff6600;text-decoration:none;}
a:hover{color:#3366cc;}
/* dlyL */
.dlyL{width:690px;height:415px;position:relative;margin:20px auto;}
.dlyL b{background:url(images/icons-arrow.gif) no-repeat;}
.dlyL b{width:10px;height:15px;display:block;position:absolute;top:35px;cursor:pointer;}
.dlyL b.prev{left:13px;top:110px;background-position:0 0;}
.dlyL b.next{right:13px;top:110px;background-position:-9px 0;}
.dlyL div{width:620px;height:340px;margin:0 auto 9px;overflow:hidden;border:solid 1px #ddd;}
.dlyL span{display:block;text-align:center;}
.dlyL span i{padding:2px 5px;background-color:#cbcbcb;color:#fff;margin:auto 1px;cursor:pointer;}
.dlyL span i.current{background-color:#ef7000;}
.dlyL h4{font-weight:normal;text-align:center;padding-top:8px;}
</style>
</head>

<body>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var $index = 0;
	var $nav = $(".dlyL span i");
	var $text = $(".dlyL h4 a");
	var $pics = $(".dlyL div a");
	/*0代表分页的个数 然后就爱那个dlyL 的 span i h4 a div a 分别放去其中*/

	$(".dlyL span i").click(function(){	
	/*是用来区分按钮的点击事件*/
		var $self = $(this);
		var $index = $nav.index($self);
		showMzin($index);
		/*三个是将按钮的 点击后的显示那张图 然后继续效果 和 启动前面两个效果设定好 */
		$(".dlyL b.next").click(function(){
		/*设点向左边的按钮的点击事件*/
			if($index<3){/* 设置4个显示分页 */
				$index++
			}
			/*如果图片大于3就+1*/
			else if($index==3){ 
				$index=0
			}
			/*如果图片等于3就回到0号图片*/
			showMzin($index);
			/*启动效果*/
		});
		
		$(".dlyL b.prev").click(function(){
		/*设点向右边的按钮效果*/
			if($index>0){
				$index--
			}
			/*如果图片小于0就-1*/
			else if($index==0){
				$index=3 
			}
			/*如果如片等于0的话就回到3*/
			showMzin($index);
			/*启动效果*/
		});

	}).eq(0).trigger("click");
	/*当页面加载成功后从0号图片开始执行效果*/

	function showMzin(i){
	/*把执行的效果放进来*/
		$pics.hide(),
		/*按照前面的效果变化图片*/
		$pics.eq(i).show(),
		/*将对应的图片放进应该显示的窗口*/
		$text.hide(),
		/*管理哪张图需要在下方出现什么样的文字*/
		$text.eq(i).show(),
		/*根据前面的效果来显示出文字*/
		$nav.removeClass("current"),
		/*当图片消失的时候下面的按钮号跟着失去底色*/
		$nav.eq(i).addClass("current");
		/*当显示图片时下面的按钮号的底色更换*/
	}
	
	DLYTime =setInterval(function(){
		$(".dlyL b.next").trigger("click");
	 }, 3000);
	 /*开始根据上面的代码开始实现 相隔的时间为3秒钟*/
	$(".dlyL").mouseover(function(){
		if(DLYTime){clearInterval(DLYTime);}
	});
	/*当点击 下面的数字按钮还是左右按钮后 还是根据上面的效果来从新计时*/
	$(".dlyL").mouseout(function(){
		DLYTime =setInterval(function(){
			$(".dlyL b.next").trigger("click");
	 	},3000);
	 	/*当完成了一轮新的效果后 在点击按钮还是按照3秒来计时*/
	});
	
});
</script>
<div class="dlyL">
	<b class="prev"></b>
	<b class="next"></b>
	<div>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化" src="images/965e7aec8b1d0d112be431a8f54df0cb.jpg" /></a>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用div+css制作一个CSS3的泡泡动画按钮非常漂亮" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
	</div>
	<span>
		<i>1</i><i>2</i><i>3</i>
	</span>
	<h4>
		<a href="http://www.17sucai.com/">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a>
		<a href="http://www.17sucai.com/">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a>
		<a href="http://www.17sucai.com/">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a>
	</h4>
</div><!--dlyL end-->
</body>
</html>

  • 大小: 38.2 KB
  • 大小: 119.6 KB
分享到:
评论

相关推荐

    jquery 图片切换 switchable 带左右按钮控制分页索引图片切换.rar

    用jquery制作图片切换效果,图片淡隐淡现带左右按钮和分页索引图片控制,鼠标点击按钮或图片显示大图,大图淡隐淡现切换播放,提高用户体验设计是jquery 图片切换中非常常用的jquery 特效。

    jquery图片切换插件制作左右按钮与标题文字图片滚动切换

    总结起来,制作一个jQuery图片切换插件,关键在于理解jQuery的选择器、方法和事件绑定机制,以及如何利用CSS和JavaScript协同创建动态效果。通过以上步骤,我们可以创建一个功能齐全、用户友好的图片滚动切换组件,...

    jquery左右按钮与选项卡按钮控制图片左右滚动

    "jQuery左右按钮与选项卡按钮控制图片左右滚动"是一个基于jQuery实现的图片滚动插件,它结合了选项卡功能,允许用户通过点击左右按钮或选项卡来切换图片。以下是关于这个主题的详细知识点: 1. **jQuery库**:...

    jQuery带显示隐藏左右按钮的幻灯片效果

    本文将深入探讨如何使用jQuery库来实现一个带显示隐藏左右按钮的幻灯片效果,帮助你提升网站的视觉吸引力。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在创建幻灯片...

    带左右按钮控制图片切换jQuery幻灯片.zip

    该资源是一个基于jQuery实现的图片切换幻灯片插件,主要功能是通过左右按钮来控制图片的前后切换,为网站的首页或者产品展示区域提供动态的视觉效果。在这个压缩包中,包含了两个主要文件:一个JavaScript文件(可能...

    jquery带分页数字左右按钮控制单排图片切换

    "jquery带分页数字左右按钮控制单排图片切换"是一个使用jQuery库实现的特定功能,它结合了分页和导航按钮,使得用户可以通过点击数字分页或左右箭头来浏览一排图片。这个功能对于产品展示、图片画廊或任何需要滚动...

    带左右按钮的jquery图片切换效果

    本示例将探讨如何使用jQuery实现一个带有左右按钮的图片切换效果。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。 首先,我们需要在HTML中设置基本的结构。创建一个包含图片...

    jquery图片滑动效果制作左右按钮控制图片滑动效果代码

    本教程将深入讲解如何使用jQuery来创建一个具有左右按钮控制的图片滑动效果。这个功能通常用于展示产品图片或创建轮播图,能够提升用户体验并增加网站的互动性。 首先,我们需要在HTML文件中设置基本结构。创建一个...

    jQuery按钮控制叠加图片切换代码.zip

    在本项目中,我们主要探讨的是使用jQuery库来实现一种图片切换效果,即通过按钮控制叠加图片的旋转木马切换。这种效果常用于创建交互式的图片相册或展示区域,可以提升用户体验,使得用户能够方便地浏览一组图片。...

    jQuery实现的带数字左右按钮控制图片切换特效源码.zip

    该资源是一个基于jQuery库开发的图片切换特效代码,主要用于网页中的图像展示,具有左右按钮控制以及数字指示器功能。在网页设计和开发中,这样的图片轮播插件能够提升用户体验,使得用户可以方便地浏览一组相关的...

    jQuery左右箭头按钮控制图片滚动切换特效

    本特效以"jQuery左右箭头按钮控制图片滚动切换"为主题,旨在帮助开发者创建一个用户友好的图片浏览体验,通过点击左右箭头实现图片的平滑滚动。 首先,我们要了解这个特效的核心是使用jQuery的事件监听和动画功能。...

    jquery根据图片个数显示隐藏左右滚动按钮

    在本案例中,我们探讨的是如何使用jQuery根据图片个数动态地显示或隐藏左右滚动按钮。这通常应用于图片轮播插件或者画廊组件,为用户提供浏览多张图片的功能。 首先,我们需要理解基本的HTML结构。一个简单的图片...

    基于jQuery的对象切换插件,JQuery图片切换

    在提供的文件名"soChange"中,我们可以推断这可能是一个具体的jQuery图片切换插件。这个插件可能包含了上述提到的所有功能,并且进行了封装,方便开发者在项目中快速集成和自定义。 ### 使用与自定义 在实际应用中...

    jQuery带数字左右按钮控制图片切换.zip

    本篇文章将详细解析如何利用jQuery来创建一个带数字左右按钮控制的图片切换功能。 首先,我们需要理解jQuery的基本使用。jQuery的核心理念是“Write Less, Do More”,它通过简洁的语法封装了大量DOM操作、事件处理...

    jquery图片左右滚动按钮控制图片左右滚动效果代码

    本主题聚焦于"jquery图片左右滚动按钮控制图片左右滚动效果代码",这是一种常见的网页交互设计,常见于产品展示或图片轮播场景。通过使用jQuery,我们可以实现用户点击左右按钮来平滑地滚动图片,提升用户体验。 ...

    jquery全屏图片滑动切换带左右按钮控制图片滑动切换效果代码

    这个代码实现的功能是通过jQuery库,配合左右按钮来控制全屏图片的滑动切换,使得用户可以方便地浏览一系列全屏展示的图片。 首先,我们需要理解jQuery库的基础知识。jQuery是一个轻量级、高性能的JavaScript库,它...

    jquery左右按钮控制图文切换代码.zip

    本资源"jquery左右按钮控制图文切换代码.zip"提供了一个使用jQuery实现的功能,允许用户通过点击左右按钮来切换页面上的图片和相关文字内容,这种效果常见于产品展示、相册浏览或文章阅读等场景。 首先,我们来理解...

    jquery图片切换案例

    在本文中,我们将深入探讨jQuery图片切换效果的实现方法,基于提供的"jquery图片切换案例"。这九种不同的案例展示了如何使用jQuery库轻松地创建动态、吸引人的图片展示,为网页设计增添更多互动性。 首先,jQuery是...

    jquery简洁版左右按钮切换焦点图

    4. 图片切换效果:使用jQuery的动画效果(如fadeIn/fadeOut)平滑地过渡到下一张图片。 5. 索引更新:根据当前显示的图片,同步更新索引指示器的状态。 6. 优化与兼容性处理:确保代码在不同的浏览器环境和设备上...

Global site tag (gtag.js) - Google Analytics