jquery左右透明遮罩图片切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery左右透明遮罩图片切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery左右透明遮罩图片切换代码 </title>
<link rel="stylesheet" type="text/css" href="css/page.css" />
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>

	<div class="teachers_team ov pr clearfix">
		<div class="teachers_team_tit tc ">团队风采</div>
		<div class="teachers_list pr">
			<div class="teachers_scroll roll-box">
				<a class="prev" id="prev" href="javascript:;"></a>
				<div class="teachers_box sp-box roll-content ">
					<ul class="teachers-cont">
						<li class="on">
							<a href="javascript:;">
								<h3><strong>【张三三】</strong>资深前端工程师，常用昵称”大花“</h3>
								<img src="images/1.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">张三三：</strong>申论、面试讲师，17landing创始人，多年潜心修炼，教学返璞归真，打破公考培训诸多弊端，坚信“一切不能提高成绩的培训都是耍流氓”，致力于提供国内最好的教学，理想是创立一所太湖大学堂式的新式学校。</p>
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【李四四】</strong>资深前端工程师，常用昵称”二花“</h3>
								<img src="images/2.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">李四四：</strong>数量和资料、面试讲师，多次国考省考行测80+高分，且数量和资料往往只错1题，故称“马一题”，又因及其擅长用方程等基础方法快速而准确地解答各类数量题型，又被称“马方程”。教学方法多有独到之处，教学过程轻松愉悦。</p>
						
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【王五五】</strong>资深前端工程师，常用昵称”小花“</h3>
								<img src="images/3.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">王五五：</strong>言语理解、判断推理、面试讲师，号称智商140的美少女，创过业，考过公，两周准备考公就笔面第一，实战派教学，简单实用，言辞犀利，直指要害，公考途中不可多得良师。</p>
						
						</li>
						<li>
							<a href="javascript:;">
								<h3><strong>【麻六六】</strong>资深前端工程师，常用昵称”小小花“</h3>
								<img src="images/4.jpg" alt="">
							</a>
							<span></span>
							<div class="teachers_infobg"></div>
							<p class="teachers_info fsize_20"><strong class="fsize_24">麻六六：</strong>申论、面试讲师，多次进面，现为在职公务员，某单位笔杆子，长期从事文件起草及稿件撰写，文笔优美，功底深厚，且实战经验丰富，注重因材施教，点石成金，能根据学生个人情况提供针对性指导，效果显著。</p>
						
						</li>
					</ul>
				</div>
				<a class="next" id="next" href="javascript:;"></a>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$(".teachers_team").css("width",$(window).width());
			$(window).resize(function(e) {
				$(".teachers_team").css("width",$(window).width());
			});
			
			//li的个数
			var len=$(".teachers-cont li").length;
			//向左箭头
			$("#prev").on("click",function(){
				//获取当前li的index
				var cur=$(".teachers-cont li[class='on']").index();
				//如果不是第一个
				if(cur!=0){
					$(".teachers-cont li").eq(cur-1).addClass("on").siblings().removeClass("on");
					$(".teachers_box").animate({marginLeft:"-"+(cur-1)*600+"px"});
				}else{
					return;
				}
			});
			
			//向右箭头
			$("#next").on("click",function(){
				//获取当前li的index
				var cur=$(".teachers-cont li[class='on']").index();
				//如果不是最后一个
				if(cur!=(len-1)){
					$(".teachers-cont li").eq(cur+1).addClass("on").siblings().removeClass("on");
					$(".teachers_box").animate({marginLeft:"-"+(cur+1)*600+"px"});
				}else{
					return;
				}
			});
			
		})
	</script>
</body>
</html>

CSS代码(page.css):

@charset "utf-8";body{margin:0;padding:0;font:12px/1.5 tahoma,arial,\5FAE\8F6F\96C5\9ED1,\5b8b\4f53,sans-serif;width:100%;}
input,button,select,textarea{outline:0 none;border:0 none;padding:0;margin:0;}
textarea{resize:none;display:inline;}
ul,p,h1,h2,h3,h4,h5,form,dl,dt,dd{margin:0;padding:0;}
img{border:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
.tc{text-align:center;}
.pr{position:relative;}
.ov{overflow:hidden;}
.fsize_20{font-size:20px;}
.fsize_24{font-size:24px;}
.clearfix:before,.clearfix:after{content:".";display:block;height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
/* IE < 8 */
.teachers_team{background:url(../images/teacher_bg.jpg) center center no-repeat;height:845px;visibility:visible !important;}
.teachers_team_tit{width:200px;height:50px;font-size:36px;margin:78px auto 0;}
.teachers_list{width:600px;margin:30px auto 0 auto;padding-bottom:150px;}
.teachers_scroll{width:600px;zoom:1;}
.teachers_scroll .prev,.teachers_scroll .next{float:left;height:95px;width:95px;cursor:pointer;background:url(../images/arrow.png) no-repeat 0 5px;position:absolute;left:-205px;top:160px;z-index:10;}
.teachers_scroll .prev:hover{background-position:0 -116px;}
.teachers_scroll .next{background-position:-108px 5px;left:715px;}
.teachers_scroll .next:hover{background-position:-108px -116px;}
.teachers_box{float:left;width:600px;*overflow:hidden;}
.teachers-cont{width:9999em;}
.teachers-cont li{float:left;padding:0px;position:relative;}
.teachers-cont li a{position:relative;z-index:3;color:#333333;display:block;}
.teachers-cont a h3{width:600px;font-size:20px;color:#5a5a5a;line-height:32px;height:32px;text-align:center;padding-bottom:15px;font-weight:normal;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;visibility:hidden;}
.teachers-cont a h3 strong{padding-right:15px;font-weight:bold;}
.teachers-cont a img{opacity:0.5;filter:alpha(opacity=50);width:600px;height:375px;}
.teachers-cont span{width:600px;height:375px;background-color:#65999a;position:absolute;left:0;top:47px;z-index:2;}
.teachers-cont .teachers_infobg{width:600px;height:375px;background-color:#000;opacity:0.7;filter:alpha(opacity=70);position:absolute;left:0;top:47px;z-index:5;display:none;}
.teachers-cont .teachers_info{width:500px;height:325px;padding:50px 50px 0;position:absolute;left:0;top:47px;z-index:100;line-height:35px;color:#fff;display:none;}
.teachers-cont li.on h3{visibility:visible;}
.teachers-cont li.on span{display:none;}
.teachers-cont li.on img{opacity:1;filter:alpha(opacity=100);}
.teachers-cont img{width:600px;height:375px;}
.teachers-cont li.on:hover .teachers_infobg{display:block;}
.teachers-cont li.on:hover .teachers_info{display:block;}

附件:下载该文件资源,减少时间成本(增值服务)