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

程序员文章站 2022-07-12 22:02:23

...

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

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

3、效果图

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

博客分类：学习前端技术jQuery clickshowMzintriggermouseout

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

博客分类：学习前端技术jQuery clickshowMzintriggermouseout

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>