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

xjwolaile

浏览: 341010 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

学习
前端技术
jQuery

click showMzin trigger mouseout

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>

images.rar (144.3 KB)
下载次数: 5

查看图片附件

分享到：

jQuery图像幻灯片上下滑动图片切换-2013062 ... | jQuery图片九宫格样式布局图片切换-2013062 ...

2013-06-27 00:11
浏览 3702
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>